微信小程序入门学习笔记
一、基础介绍
小程序是什么
小程序可以视为只能用微信打开和浏览的网站。小程序和网页的技术模型是一样的，用到的 JavaScript 语言和 CSS 样式也是一样的，只是网页的 HTML 标签被修改成了 WXML 标签，CSS标签被修改成了WXSS标签。
小程序最大的优势就是基于微信，也不需要考虑iOS和Android不同平台间的差异，同时微信也提供了丰富的API接口，例如拍摄、录音、语音识别、二维码等，小程序可以利用原生能力，快速进行开发。
开发准备
创建一个项目
image
image
调试运行项目
小程序支持实时预览，代码修改后，左边预览窗口就可以直接看到修改后的效果。
也可以点击预览按钮，通过微信的扫一扫在手机上体验。
image
二、小程序项目结构
小程序包含一个描述整体程序的 app 和若干个描述页面的 page 组成。
image
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
| 文件 | 必需 | 作用 |
|---|---|---|
| app.js | 是 | 小程序逻辑 |
| app.json | 是 | 小程序公共配置 |
| app.wxss | 否 | 小程序公共样式表 |
一个小程序页面由四个文件组成，分别是：
| 文件类型 | 必需 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑 |
| wxml | 是 | 页面结构 |
| json | 否 | 页面配置 |
| wxss | 否 | 页面样式表 |
注册小程序
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。详细的参数含义和使用请参考 App 参考文档 。
// app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。它的作用有些类似Android 中的 Application。
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
全局配置
app.json 小程序的全局配置，用于声明页面文件的路径、窗口显示、设置多tab等。完整配置项说明请参考小程序全局配置
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/index",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
注册页面
小程序的每个页面，都需要在页面对应的js文件中进行注册，同时可以指定页面的初始数据、生命周期回调、事件处理函数等。
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})
详细的参数含义和使用请参考 Page 参考文档 。
页面配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
完整配置项说明请参考小程序页面配置
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
三、页面
WXML 模板
wxml文件用来描述页面展示的代码：
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
它和html页面主要有以下两个区别：
- 标签名字不太一样，微信小程序提供了丰富的组件供开发者使用，所以不需要使用类似 div、p、span的基础标签。
- 多了一些
wx:if="{{!hasUserInfo && canIUse}}"这种{{}}的表达式，用的是 MVVM 的开发模式，将页面渲染和逻辑进行分离。通过 {{ }} 的语法把一个变量绑定到界面上，称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要if/else,for等控制能力，在小程序里边，这些控制能力都用wx:开头的属性来表达。
JS交互逻辑
小程序为组件提供了很多交互属性，且使用非常简单：
//xxx.wxml
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
//xxx.js
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
更详细的事件可以参考文档 WXML - 事件 。
这里需要注意的是，直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的。
页面跳转
框架以栈的形式维护了当前的所有页面。 当发生页面切换的时候，页面栈的表现如下：
| 路由方式 | 页面栈表现 | API |
|---|---|---|
| 打开新页面 | 新页面入栈 | wx.navigateTo |
| 页面重定向 | 当前页面出栈，新页面入栈 | wx.redirectTo |
| 页面返回 | 页面不断出栈，直到目标返回页 | wx.navigateBack |
| Tab 切换 | 页面全部出栈，只留下新的 Tab 页面 | wx.switchTab |
| 重加载 | 页面全部出栈，只留下新的页面 | wx.reLaunch |
开发者可以使用 getCurrentPages() 函数获取当前页面栈。
具体使用：
//跳转到test界面
skipTest(event) {
wx.navigateTo({
url: '../test/test',
})
}
四、API 使用
存储
每个微信小程序都有自己的本地缓存，可以通过 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync 对本地缓存进行读写和清理。
其中以 Sync 结尾的代表同步操作，二者的区别在于，异步不会阻塞当前任务。
具体使用：
setStorageTest(event) {
wx.setStorage({
key: 'name',
data: 'huangm',
success(res) {
console.log("storage success")
}
})
console.log("storage end")
},
getStorageTest(event) {
const that = this
wx.getStorage({
key: 'name',
success (res) {
that.setData({
name: res.data
})
console.log(res.data)
}
})
console.log('get Storage end')
},
deleteStorageTest(event) {
const that = this
wx.removeStorage({
key: 'name',
success(res) {
that.getStorageTest()
}
})
}
隔离策略
同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同小程序之间也无法互相读写数据。
网络请求
小程序支持普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。
具体使用：
wx.request({
url: 'https://www.wanandroid.com/banner/json',
success (res) {
console.log(res.data.data)
that.setData({
bannerList: res.data.data
})
}
})
调用Native方法
小程序提供很多设备相关API，如日历、联系人、蓝牙、电量、扫码等。
使用如下：
wx.scanCode({
onlyFromCamera: true,
success(res) {
console.log(res)
},
fail(res) {
console.log(res)
}
})
五、自定义组件
在现有官方组件无法满足我们开发需求的时候，小程序也支持 自定义组件。
组件模板
组件模板和页面类似，也是包含 xxx.js、xxx.wxml、xxx.wxss、xxx.json
image
创建一个button组件
- 配置组件，testbutton.json
{
"component" : true
}
- 绘制界面和样式
testbutton.wxml
<view class="test-button" bindtap="onClick">
{{content}}
</view>
testbutton.wxss
.test-button {
width: 100%;
height: 100rpx;
background-color: burlywood;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: cornflowerblue;
}
- 构造组件
Component 构造器可以指定组件的属性、数据、方法等，具体使用可以参考 Component 构造器。
testbutton.js
Component({
//声明属性
properties:{
content:{
type: String,
value: 'test'
}
},
methods: {
onClick: function() {
console.log('test button onclick')
var myEventDetail = {
toastContent: 'This is a test-button'
}
var myEventOption = {}
//声明事件，组件间传递数据
this.triggerEvent('onClick', myEventDetail, myEventOption)
}
}
})
- 使用自定义组件
使用的界面需要通过 usingComponents 引用该组件
{
"usingComponents": {
"Test-Button": "/component/testbutton/testbutton"
},
"navigationBarTitleText": "项目"
}
界面中直接使用该标签
<Test-Button content="This is a test-button" bindonClick="onClick"></Test-Button>
点击后弹出一个toast
onClick(event) {
console.log(event)
wx.showToast({
title: event.detail.toastContent,
duration: 2000
})
}
image
六、博客阅读demo开发
通过开发一个简单的demo，可以对以上的内容有更直观的了解。
-
tab主界面，展示最近博客列表
image
-
点击浏览具体文章
image
-
根据作者，展示文章列表
image
参考：
另外推荐两个小程序入门不错的文章
- 微信小程序开发学习 https://juejin.cn/post/6957339376086941733
- 手把手教你写微信小程序 https://juejin.cn/post/6886267464506671118
