微信小程序基础

2021/7/23 1:05:56

本文主要是介绍微信小程序基础,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前言

了解小程序的概念以及优势和劣势
掌握小程序的申请和创建流程
掌握小程序的基本模板语法
掌握小程序代码组成
了解小程序的渲染模型
掌握小程序事件的使用

1、小程序是什么?

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

任何一个普通的开发者,经过简单的学习和练习后,都可以轻松地完成一个小程序的开发和发布。

2、小程序目录结构

	pages:
		wxml: 编写小程序界面结构的地方
		wxss: 编写小程序样式的地方
		json:编写界面配置的地方
		js:编写界面逻辑的地方
	utils: 编写工具类的地方
	app.js:创建程序实例的位置
	app.json: 编写全局配置地方
	app.wxss: 编写全局样式的地方
	project.config.json: 项目的配置文件
	sitemap.json:配置哪些网站可以被检索到

3.小程序模板语法WXML

WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。例如:

3.1标签的使用
view标签是我们开发过程中最常用的标签了,这个就相当于Html中的div。
text标签也是我们开发中常用的,这个相当于Html中的span
image标签相当于我们Html中的img。

3.2数据绑定
用户界面呈现会因为当前时刻数据不同而有所不同,或者是因为用户的操作发生动态改变,这就要求程序的运行过程中,要有动态的去改变渲染界面的能力。
在 Web 开发中,开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中,使用 WXML 语言所提供的数据绑定功能,来完成此项功能。

引用数据
通过{{}}的方式可以引用数据。
除了引用数据之外,这里还可以进行一些计算,最终显示的结果是计算之后得到的结果。

<view>{{msg}},{{num + 10}}</view>

小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。

3.3逻辑渲染
WXML 中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:

<view wx:if="{{condition}}"> True </view>

使用 wx:elif 和 wx:else 来添加一个 else 块:

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

除此之外微信小程序还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候会删除掉对应的DOM,hidden属性则是通过display属性设置为none来进行条件渲染。

<view hidden="{{condition}}">
隐藏
</view>

3.4列表渲染
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。

<!-- array 是一个数组 -->
<view wx:for="{{array}}">
  {{index}}: {{item.name}}
</view>

<!-- 对应的脚本文件
Page({
  data: {
    array: [{
      name: '天亮教育',
    }, {
      name: '尚云科技'
    }]
  }
})

使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.name}}
</view>

3.5 key
wx:key 的值以两种形式提供:

  1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  2. 保留关键字 this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。
    当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

3.6 template
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。使用 name 属性,作为模板的名字。然后在 内定义代码片段,如:

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入。

msgList:[
      {
        index: 0,
        msg: '这是一段模板',
        time: '2020-10-10'
      }
    ]

<view wx:for="{{msgList}}">
  <template is="msgItem" data="{{...item}}"></template>
</view>

在 index.wxml 中引用了 item.wxml,就可以使用 item模板

<import src="item.wxml"/>

<template is="item" data="{{text: '测试'}}"/>

3.6 include
include 可以将目标文件中除了 外的整个代码引入,相当于是拷贝到 include 位置。
index.wxml

<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

4.小程序样式wxss

WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。

4.1 尺寸单位
在小程序中,规定所有手机的屏幕宽度都是750rpx,所以在不同尺寸的屏幕下1rpx的宽度都不同。
1rpx = (屏幕宽度/750)px
在iphone6手机下,屏幕宽度是375px,所以1rpx=0.5px。

4.2 样式的导入

@import './test_0.wxss'

4.3 样式选择器

在这里插入图片描述

5.小程序中的js

5.1 小程序中的js和浏览器中和node中的区别
浏览器中JS:
ES
DOM
BOM
Node中的JS:
ES
NPM
Native
小程序中的JS:
ES
小程序框架
小程序API

6.小程序中的渲染

6.1 小程序和浏览器中有什么不同
浏览器中渲染是单线程的。
而在小程序中的运行环境分成渲染层和逻辑层,第2章提到过 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。

6.2 小程序中如何渲染
我们看看小程序是如何把脚本里边的数据渲染在界面上的。
WXML模板使用 view 标签,其子节点用 {{ }} 的语法绑定一个 msg 的变量。

<view>{{ msg }}</view>

在 JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World”。

Page({
  onl oad: function () {
    this.setData({ msg: 'Hello World' })
  }
})

6.3 小程序中通讯模型

在这里插入图片描述

7.程序和界面

App({
  onLaunch: function(options) {},
  onShow: function(options) {},
  onHide: function() {},
  one rror: function(msg) {},
  globalData: 'I am global data'
})

App() 构造器必须写在项目根目录的app.js里,App实例是单例对象,在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。

onLaunch: 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow:当小程序启动,或从后台进入前台显示,会触发 onShow
onHide:当小程序从前台进入后台,会触发 onHide
one rror:当小程序发生脚本错误,或者 API 调用失败时,会触发 one rror 并带上错误信息。
其他字段:可以添加任意的函数或数据到 Object 参数中,在App实例回调用 this 可以访问。

7.2 生命周期

onLoad:生命周期函数–监听页面加载,触发时机早于onShow和onReady
onReady:生命周期函数–监听页面初次渲染完成
onShow:生命周期函数–监听页面显示,触发事件早于onReady
onHide:生命周期函数–监听页面隐藏
onUnload:生命周期函数–监听页面卸载



这篇关于微信小程序基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程