小程序从入门到放弃
先导：小程序学习，原本是去年在公司内部做的一次技术分享演讲所写的，用于讲解时使用。现在我分享出来，对没接触过小程序能有个大致了解。
资料
小程序示例
0. 什么是小程序
通信模型
1. 目录结构
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils
2. 配置小程序
2.1 全局配置
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/index",
"text": "日志"
}]
},
}
2.2 页面配置
3. 框架
3.1 注册小程序
App() 构造器
小程序生命周期
getApp()
整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。
const app = getApp()
console.log(app.globalData)
3.2 注册页面
Page()构造器
页面生命周期
3.3 路由
页面栈概念
路由语法
有2种用法，调用API或使用组件。
| 小程序 | vue |
|---|---|
wx.navigateTo | router.push |
wx.redirectTo | router.replace |
wx.navigateBack | router.go(-1) |
wx.switchTab 只能跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面(不能带参数)
wx.reLaunch 关闭所有页面，打开到应用内的某个页面
语法示例
wx.navigateTo({
url: '../logs/logs?id=1'
})
页面如何获取url的query？
onLoad(options) {
console.log(options)
}
3.4 事件系统
事件绑定bind/catch的区别
4. 语法
4.1 wxml语法(模板语法)
<view id="item-{{id}}"> {{ message }} </view>
Page({
data: {
id: 0,
message: 'Hello MINA!'
}
})
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{ message: 'foo' }, { message: 'bar' }]
}
})
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
小程序中如何实现v-show？
4.2 js语法
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
<view>{{text}}</view>
<button bindtap="changeText"> 改变 </button>
Page({
data: {
text: 'init data',
},
changeText: function() {
console.log(this.data.num, '获取')
// 设置
this.setData({
text: 'changed data'
})
},
})
数组和对象如何设置？
4.3 自定义组件
组件生命周期
语法
| 小程序 | vue |
|---|---|
properties | props |
behaviors | mixins |
observers | watch |
methods | methods |
5. 组件
不可用HTML语法，没有div，p，span……
view 可看作 div
text 可看作 span
什么是原生组件？传送门
6. API
6.1 交互
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
6.2 发起网络请求
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
method: 'GET', // 默认值
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
6.3 数据缓存
wx.setStorage/wx.setStorageSync 设置
wx.getStorage/wx.getStorageSync 获取
wx.removeStorage/wx.removeStorageSync 移除
wx.clearStorage 清空所有
6.4 图片
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})
6.5 位置
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
}
})
6.6 电话
wx.makePhoneCall({
phoneNumber: '1340000'
})
7. 其它
7.1 登录授权
关于登录授权又双叕变了 官方公告
wx.login 调用接口获取登录凭证（code）
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
获取用户信息
wx.getUserProfile 获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。
wx.getUserInfo 已被弃用，说多都是泪
有些权限需要用户授权才能使用
7.2 使用npm
npm init 初始化，出现package.json则成功
安装 npm 包
点击开发者工具中的菜单栏：工具 --> 构建 npm。
点击开发者工具中的详情 --> 本地设置，勾选“使用 npm 模块”选项
使用
7.3 小程序UI组件库
结束语
有助于开发者对小程序有个初步认识和快速上手，虽然目前还有许多不完善的地方。
该篇仅为内部培训资料使用，如需转载请联系作者。
