小程序是什么？
- 官方称为"小程序"，可理解为镶嵌在微信的App
- 与订阅号、服务号和企业号属于同级体系。由此，小程序、订阅号、服务号、企业号形成了并行的微信生态四大体系。
小程序优势
- 性能比WebApp好
- 无需安装，不占内存，在微信内即搜即用，使用成本相对于安装App来说降低了很多
- 学习开发门槛低，前端技术+热更新
- 调用微信推送，地图or定位，扫码，支付等多种服务
应用场景
横轴=需求刚性，纵轴=需求频次，象限=需求类别
- 象限1：高频、刚需，小程序不适用于高频、刚需的需求场景，该场景下应采用原生App
- 象限2：高频、非刚需，游戏，视频等要求很高的交互、视觉体验和沉浸感，建议采用原生App；日常工具类产品，
在功能和性能满足的前提下，基于开发成本和使用成本，建议采用小程序 - 象限3：低频、非刚需，属于小众专业度很强的需求，不建议使用
- 象限4：低频、刚需，小程序非常适用于低频、刚需的长尾生活服务需求
代码构成
- .json 后缀的 JSON 配置文件
- .wxml 后缀的 WXML 模板文件
- .wxss 后缀的 WXSS 样式文件
- .js 后缀的 JS 脚本逻辑文件
小程序的启动
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
紧接着通过配置 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行
App({
onLaunch: function () {
// 小程序启动之后 触发
}
})
新建页面
Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 .wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
生命周期
image
数据绑定
通过setData传递数据来刷新绑定的视图，不支持双向绑定
//.js
Page({
data: {
imgSrc: "http://www.google.cn/xxx.jpg",
}
})
//.wxml
<image src="{{imgSrc}}"></image>
列表渲染
//.js
Page({
data:{
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
//.wxml
<text wx:for="{{items}}" wx:for-index="itemIndex" wx:for-item="itemValue" >{{itemValue.message}}</text>
显示与隐藏元素
使用wx-if和hidden控制元素的显示和隐藏
<text wx-if="{{items.length > 0}}">大标题</text>
事件处理
- 小程序中，全用bindtap(bind+event)，或者catchtap(catch+event)绑定事件
- 控件可添加data-"自定义参数"，通过function中"事件参数".currentTarget.dataset."自定义参数"获取到值
//.wxml
<button bindtap="noWork" data-tag1="buttonA">明天不上班</button>
//.js
Page({
data: {
},
noWork:function (e) {
console.log(e.currentTarget.dataset.tag1);
}
})
网友评论