微信小程序原生开发入门学习笔记
微信小程序（原生）开发入门学习笔记
一、开发前准备
1、注册开发者账号并拿取AppID
注册：
Appid：开发 / 开发管理 / 开发者ID
2、下载微信开发者工具
下载地址：
3、创建第一个微信小程序项目
启动微信开发者工具：
4、项目目录文件简介
│ .eslintrc.js
│ app.js // 项目入口文件
│ app.json // 小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
│ app.wxss // 小程序公共样式表
│ project.config.json // 项目配置文件，如AppID等
│ project.private.config.json
│ sitemap.json // 微信索引文件
│
├─pages // 页面文件夹
│ ├─index // 首页
│ │ index.js // 书写页面逻辑
│ │ index.json // 页面配置
│ │ index.wxml // 书写页面标签结构
│ │ index.wxss // 书写页面样式
│ │
│ └─logs // 日志页面
│ logs.js
│ logs.json
│ logs.wxml
│ logs.wxss
│
└─utils // 第三方工具（可删除）5、 配置服务器域名（可选）
场景：如果Ajax请求链接的服务器非微信云服务器，需配置服务器域名。
配置方法：开发 / 开发管理 / 服务器域名
二、小程序配置
2.1 全局配置
根目录下的
app.json
文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
全局配置详见：
常用配置：
{
// ⽤于描述当前⼩程序所有⻚⾯路径
"pages": [
"pages/index/index",
"pages/logs/index"
],
// 定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
// tab 的列表，最少 2 个、最多 5 个 tab
"list": [{
// 页面路径
"pagePath": "pages/index/index",
// tab 上按钮文字
"text": "首页"
}, {
"pagePath": "pages/logs/index",
"text": "日志"
}]
},
// 网络超时
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}tabBar的相关配置：
2.2 页面配置
每一个小程序页面也可以使用同名
.json
文件来对本页面的窗口表现进行配置，页面中配置项会
覆盖
app.json
的
window
中相同的配置项。详见：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜⾊，如 #000000 |
| navigationBarTextStyle | String | white | 导航栏标题颜⾊，仅⽀持 black /white |
| navigationBarTitleText | String | 导航栏标题⽂字内容 | |
| backgroundColor | HexColor | #ffffff | 窗⼝的背景⾊ |
| backgroundTextStyle | String | dark | 下拉loading的样式，仅⽀持black /white |
| enablePullDownRefresh | Boolean | false | 是否开启当前页面下拉刷新 ,详⻅ [Page(Object object) |
| onReachBottomDistance | Number | 50 | ⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px。详⻅ [Page(Object object) |
| disableScroll | Boolean | false | 设置为 true 则⻚⾯整体不能上下滚动；只在⻚⾯配置中有 效，⽆法在 app.json 中设置该项 |
2.3 构建npm
① 首先执行 npm init -y 得到 package.json 文件
② 执行 npm i 获得node_modules文件夹
③ 点击工具 → 构建npm得到 miniprogram_npm文件夹
三、小程序的生命周期
3.1 应用生命周期
每个小程序都需要在
app.js
中调用
App
方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。其他页面通过
getApp()
来获取数据。详见：
| 属性 | 说明 | API |
|---|---|---|
| onLaunch | 小程序初始化完成时触发，全局只触发一次。 | |
| onShow | 监听⼩程序启动或切前台。 | |
| onHide | 监听⼩程序切后台。 | |
| onError | 错误监听函数。 | |
| onPageNotFound | ⻚⾯不存在监听函数。 |
// app.js
App({
onLaunch (options) {
// 初始化完成时触发，全局只触发一次
},
onShow (options) {
// 当小程序启动，或从后台进入前台显示，会触发 onShow
},
onHide () {
// 小程序从前台进入后台，触发 onHide
},
onError (msg) {
// 当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息
console.log(msg)
},
// 全局数据
globalData: {}
})3.2 页面生命周期
详见：
注意：小程序的数据绑定放在data对象中，函数声明放在 Page({})中
// pages/xxx/xxx.js
Page({
/**
- 页面的初始数据
*/
data: {
},
/**
- 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
- 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
- 生命周期函数--监听页面显示
*/
onShow() {
},
/**
- 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
- 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
- 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
- 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
- 用户点击右上角分享
*/
onShareAppMessage() {
}
})四、WXML 语法
语法详见：
4.1 数据绑定
语法：{ {value}}
注意点： 花括号和引号之间如果有空格，将最终被解析成为字符串
4.2 列表渲染
详见：
语法：wx:for="{ {Array}}" wx:key=“unique”
<block wx:for="{{[1, 2, 3]}}" wx:key="index">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>注意点：默认数组的当前项的下标变量 index，数组当前项的变量名默认为 item,支持自定义。
4.3 条件渲染
详见：
语法：wx:if="{ {Boolean}}"
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>公共属性 hidden
<view hidden="{{true}}"> True </view>注意点： 频繁切换 ⽤ hidden，不常使⽤ ⽤
wx:if
五、事件绑定
详见：
语法：bindEvent=“callBack”
常用的一些事件绑定：
5.1 点击事件
语法：bindtap=“callBack”
事件传值 通过标签⾃定义属性的⽅式
xxx.wxml
<button bindtap="handleTap" data-item="100">Click me!</button>xxx.js
Page({
handleTap: function(event) {
// {item:100}
console.log(e.currentTarget.dataset)
}
})5.2 输入事件
语法：bindinput=“callBack”
xxx.wxml
<input
bindinput="handleInput"
placeholder="请输入名称"
value="{{value}}"
type="text"
/>xxx.js
Page({
data: {
value: 0
},
handleInput: function(e) {
// 输入框的值
console.log(e.detail.value);
}
})六、页面跳转
6.1 使用 navigator 组件跳转
详见：
常用属性：
open-type 有效值：
传参可在 url 使用?拼接，多个参数使用&拼接， 使用 onLoad 页面生命周期拿去参数
xxx.wxml
<!-- 跳转并传参 -->
<navigator
open-type="navigate"
url="{{'/pages/goods_detail/goods_detail?id=1}}"
/>xxx.js
// 取出参数
onLoad(options) {
console.log(options.id) // 1
}6.2 使用路由跳转
详见：
使用方式：在 js 中直接调用，传参与拿取参数与 navigator 组件一致。
// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({ url: '/index' })
// 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.redirectTo({ url: 'test?id=1' })
// 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
// 使用 wx.navigateBack 可以返回到原页面。
wx.navigateTo({ url: 'test?id=1' })
// 关闭当前页面，返回上一页面或多级页面。
wx.navigateBack()
// 关闭所有页面，打开到应用内的某个页面
// 使用场景：当用户点击首页按钮时，关闭所有页面，返回首页。
wx.reLaunch({ url: 'test?id=1' })Tip：小程序中页面栈最多十层 。
七、数据管理
7.1 页面 data 中的数据
data 简介：页面加载时，data 将会以 JSON 字符串的形式由逻辑层传至渲染层，渲染层可以通过 wxml 对数据进行绑定。
修改 data 中的数据使用： this.setData( Object data, Function callback )
否则不会引起视图的更新。
详见：
Page({
data: {
name: '张三',
},
handleTap() {
this.setData({ name:'法外狂徒' })
},
})7.2 数据缓存
详见：
本地缓存：将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
// 存储数据
wx.setStorageSync(string key, any data)
// 取出数据
wx.getStorageSync(string key)
//清理本地缓存
wx.clearStorage()八、WXSS 语法
简介：样式语言，具有
css
大部分的特性，wxss 在 css 基础上做了一些扩充和修改。
① 尺寸单位 rpx ：
新增尺寸单位 rpx，可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。
② 样式导入：
使用
@import
语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用
;
表示语句结束。
@import "common.wxss";九、常用 API
| API | 功能 | 文档位置 |
|---|---|---|
| wx.request() | 发起 HTTPS 网络请求 | [RequestTask |
| wx.showToast() | 显示消息提示框 | [wx.showToast(Object object) |
| wx.hideToast() | 隐藏消息提示框 | [wx.hideToast(Object object) |
| wx.showLoading() | 显示 loading 提示框 | [wx.showLoading(Object object) |
| wx.getSystemInfo() | 获取系统信息 | [wx.getSystemInfo(Object object) |
| wx.vibrateShort() | 使手机发生较短时间的振动 | [wx.vibrateShort(Object object) |
| wx.chooseMedia() | 拍摄或从相册中选择图片或视频 | [wx.chooseMedia(Object object) |
| wx.previewImage() | 在新页面中全屏预览图片 | [wx.previewImage(Object object) |
| wx.login() | 调用接口获取登录凭证 | [wx.login(Object object) |
| wx.requestPayment() | 发起微信支付 | [wx.requestPayment(Object object) |
| wx.chooseAddress() | 获取用户收货地址 | [wx.chooseAddress(Object object) |
十、组件
详见：
常用组件：
- view 视图容器
- text 文本
- image 图片
- input 输入框
- button 按钮
- textarea 长文本输入框
- swiper 滑块视图容器
- scroll-view 可滚动视图区域
- rich-text 富文本
- ……
十一、其他
11.1 wx.request 二次封装
export const request = (params) => {
// 判断 url 中是否带有 /my/ 请求的是私有的路径 带上 header token
let header = { ...params.header };
if (params.url.includes("/my/")) {
// 拼接 header 带上 token
header["Authorization"] = wx.getStorageSync("token");
}
// 定义公共的 url
const baseUrl = "https://xxxx";
return new Promise((resolve, reject) => {
wx.request({
...params,
header: header,
url: baseUrl + params.url,
success: (result) => resolve(result.data),
fail: (err) => reject(err),
complete: () => {}
});
});
};