微信小程序开发

有利条件

无需安装。

它随处可见，随处可见。

使用后，无需写入卸载。

小程序的app地址。

安装微信小程序工具

小程序的目录结构

app。js（applet的主逻辑）

app。Json（小程序全局公共配置）

app。Wxss（小程序全局公共样式表）

覆盖页面的全局配置

创建新页面

在pages目录下，右键单击以创建新目录，并在当前创建的目录下创建新的页面框架。

在app.json的pages选项中添加新页面的路径。

小程序和页面的生命周期

*小程序生命周期：

https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

app({

onLaunch（选项）{

//启动时做一些初始操作。

},

onShow（选项）{

//表演时做点什么。

},

打开隐藏（）{

//躲起来的时候做点什么。

},

onError（消息）{

控制台.log（消息）

},

globalData:'我是全局数据'

})

onLaunch全局只能触发一次。

*页面生命周期：

第页({

/**

*页面的初始数据

*/

数据：{

},

/**

*生命周期功能——监听页面加载

*/

onLoad:函数（选项）{

console.log（“onload”）

},

/**

*生命周期函数——聆听页面第一次呈现的完成情况

*/

onReady:函数（）{

console.log（“onReady”）

},

/**

*生命周期功能——监控页面的显示

*/

onShow:函数（）{

console.log（“onShow”）

},

/**

*生命周期功能——隐藏监听页面

*/

onHide:函数（）{

onsole.log（“onHide”）

},

/**

*生命周期功能--侦听页面卸载

*/

onUnload:函数（）{

onsole.log（“onUnload”）

},

/**

*与页面相关的事件处理功能——监听用户下拉操作

*/

onPullDownRefresh:函数（）{

},

/**

*页面拉底事件的处理功能

*/

onReachBottom：函数（）{

},

/**

*用户单击右上角共享

*/

onShareAppMessage:函数（）{

}

})

OnLoad和onReady仅渲染一次。

小程序大小单位：“rpx”

柔性布局

数据绑定

Mustache语法：｛｛｝｝

单向数据绑定

动态数据绑定

小程序通过此进行分配。setData（对象）

var api数据={

textStr:“服务器数据”，

名称：“千斤顶”

};

this.setData（apiData）；

获取数据的价值

此数据。关键值

小程序的条件呈现

Wx：如果为真，则将显示元素。如果为false，则不会显示元素。

测试结果</view>

｛｛score｝｝

60｝｝”>通过</view>

90｝｝”>优秀</view>

好</view>

非空</view>

小程序的列表呈现

Wx:对于绑定数组，Wx:for item value是当前变量名，Wx:for index是当前下标变量名。

<；/图像>

>｛｛item.name｝｝

小程序事件绑定和事件交互

绑定+事件方法

你需要用js编写相应的方法

<视图>

｛｛changeText｝｝

更改文本

--------------------------

数据：{

//textStr:“hello word11”

//得分：90

数据列表：[]，

changeText:“你好hundun”

},

changetext:函数（）{

//console.log（1）

this.set数据({

更改文本：“ni hao ya”

})

},

longtap:函数（）{

console.log（“longtap”）

},

小程序事件机制捕获和绑定

Bind将使用冒泡机制，catch将防止事件冒泡。

捕获阶段绑定和捕获

单击</text>

捕获绑定：点击

捕获捕获：点击