教程地址：https://developers.weixin.qq.com/miniprogram/dev/
基础
申请帐号
点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。
登录 https://mp.weixin.qq.com ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。
image.png
微信小程序的基础知识主要分为以下几个部分：
- 两种配置文件 && 两个核心函数
- WXML模板语法，页面渲染
- 页面间的跳转
- 交互事件
- 官方组件和官方API
两种配置文件 && 两个核心函数
app.json 应用的全局配置文件
app.json是针对微信小程序的全局配置，主要包含以下几个配置：
- pages：页面路径的数组，表示小程序要加载的所有页面，其中数组第一项代表小程序的初始页面。
- window：微信原生功能，定制化不强。可设置小程序的状态栏、导航条、标题以及窗口背景色。
- tabBar：微信原生功能，定制化不强。适用于常规的Tab应用，Tab栏可置于顶部或底部；tabBar是一个数组，仅支持2-5个tab。
- networkTimeout：配置小程序网络请求的超时时间。
- debug：调试模式开关，开发模式下建议开启，正式发布别忘了关闭。
app.json配置
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
tabBar:{},
networkTimeout: {},
debug: true,
functionalPages: true
subPackages:[]
workers:
}
page.json 页面的全局配置文件
除了上面提到的全局配置，每个页面还可以单独配置page.json，page.json会覆盖app.json中的配置，并只对当前页面生效。 page.json只能对window配置，有两个比较有用的配置项分别是：
- enablePullDownRefresh：是否开启下拉刷新
- disableScroll：只能在page.json配置，禁止页面上下滚动
App() 小程序注册入口，全局唯一
App()用来注册一个小程序，全局只有一个，全局的数据也可以放到这里面来操作。
// 注册微信小程序，全局只有一个
let appConfig = {
// 小程序生命周期的各个阶段
onLaunch: function(){},
onShow: function(){},
onHide: function(){},
onError: function(){},
// 自定义函数或者属性
...
};
App(appConfig);
// 在别的地方可以获取这个全局唯一的小程序实例
const app = getApp();
小程序并没有提供销毁的方式，所以只有当小程序进入后台一定时间、或者系统资源占用过高的时候，才会被真正的销毁。
Page() 页面注册入口
Page()用来注册一个页面，维护该页面的生命周期以及数据。
// 注册微信小程序，全局只有一个
let pageConfig = {
data: {},
// 页面生命周期的各个阶段
onLoad: function(){},
onShow: function(){},
onReady: function(){},
onHide: function(){},
onUnload: function(){},
onPullDownRefresh: function(){},
onReachBottom: function(){},
onShareAppMessage: function(){},
// 自定义函数或者属性
...
};
Page(pageConfig);
// 获取页面堆栈，表示历史访问过的页面，最后一个元素为当前页面
const page = getCurrentPages();
生命周期
app.json 和 page.json 维护了应用和页面的配置属性。App() 和 Page() 维护了应用和页面的各个生命周期以及数据。
| 属性 | 描述 | 触发时机 |
|---|---|---|
| onLaunch | 监听小程序初始化 | 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） |
| onShow | 生命周期函数--监听小程序显示 | 当小程序启动，或从后台进入前台显示，会触发 onShow |
| onHide | 生命周期函数--监听小程序隐藏 | 当小程序从前台进入后台，会触发 onHide |
| 属性 | 描述 |
|---|---|
| onLoad | 生命周期回调—监听页面加载 |
| onShow | 生命周期回调—监听页面显示 |
| onReady | 生命周期回调—监听页面初次渲染完成 |
| onHide | 生命周期回调—监听页面隐藏 |
| onUnload | 生命周期回调—监听页面卸载 |
onLoad(Object query) 页面加载时触发。一个页面只会调用一次。
onShow() 页面显示/切入前台时触发。
onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。详见生命周期
onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
onUnload() 页面卸载时触发。如redirectTo或navigateBack到其他页面时。
前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。
WXML模板语法，页面渲染
数据绑定
在 WXML 中可以使用{{}}将 Page 的变量或者表达式包裹起来，实现数据绑定，举个例子：
// 将message的值渲染到view中
<view> {{ message }} </view>
// 将id的值渲染到view的id属性中
<view id="item-{{id}}"> </view>
// 根据isSelected的值，输出不同的class
<view class="{{isSelected ? 'selected' : ''}}"> HelloWorld </view>
// 结合template，可以传入更复杂的数据
<template is="objectCombine" data="{{...article, categoty, tag: '埃隆马斯克'}}"></template>
条件渲染
条件渲染，适合根据数据输出不同状态的 WXML，举个例子：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
循环渲染
循环渲染，适合遍历数据输出多段 WXML，举个例子：
// wx:for 表示需要遍历的数据
// wx:key 使用唯一的字段来标识，有利于提升性能
// wx:for-index 表示数组的下标
// wx:for-item 表示数组的元素
<view wx:for="{{[{id:1, message: 'HelloWorld1'}, {id:2, message: 'HelloWorld2'}]}}"
wx:key="id"
wx:for-index="idx"
wx:for-item="item">
{{idx}}: {{item.message}}
</view>
模块化
WXML的模块化，可以让我们复用一些wxml片段，还挺重要的，举个例子：
// 引入wxml模块
<import src="../../components/grid-article/index"></import>
<block wx:for="{{posts}}" wx:for-item="post" wx:key="id">
// 调用wxml模块，同时可传入数据
<template is="grid-article" data="{{post}}"></template>
</block>
页面间的跳转
- 打开新页面调用API <mark style="box-sizing: border-box;">wx.navigateTo</mark>或者使用<navigator open-type="navigate"/>
- 页面重定向调用API <mark style="box-sizing: border-box;">wx.redirectTo</mark> 或者使用组件<navigator open-type="redirect"/>
- 页面返回调用API <mark style="box-sizing: border-box;">wx.navigateBack</mark> 或者用户按左上角按钮返回
- tab切换调用API <mark style="box-sizing: border-box;">wx.switchTab</mark> 或者使用组件<navigator open-type="switchTab"/> 或者用户切换tab
交互事件
事件绑定
// bindtap 和 catchtap的区别在于
// bindtap 不会阻止事件冒泡
// catchtap会冒泡事件冒泡
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
<view id="tapTest" data-hi="WeChat" catchtap="tapName"> Click me! </view>
// 绑定的函数tapName只是一个函数名称，默认接受一个event对象作为参数
Page({
tapName: function(event) {
console.log(event)
}
})
事件传参
传递自定义参数主要有两种方式：
- 第一种：将参数绑定到wxml标签上，然后通过event.target.dataset获取
- 第二种：直接使用Page.data或其他数据
网友评论