微信小程序入门(更新中)
小程序与普通网页开发的区别
- 网页开发渲染线程和脚本线程是一个进程。而小程序二者是分开的，分别运行在不同的线程。
- 网页开发者可以操作DOM和BOM。小程序缺少操作DOM和BOM的方法。导致了JQ、Zepto等，在小程序中无法运行。
- 小程序的运行环境与nodejs环境也不相同，所以一些npm包在小程序中无法运行。
- 从小程序基础库版本2.2.1开始支持使用npm安装第三方包。
小程序开发流程
- 注册小程序账号
为了获取AppID，AppID就像我们的身份证一样，是唯一且很重要的，后续的所有开发流程都会基于这个AppID来完成。
- 注册方式：
- 直接在微信小程序的官网注册
- 通过微信公众号注册
- 条件是已经有微信公众号(企业级，个人不可以)
- 有点事如果公众号已经认证过了，小程序不需要再次认证，省去了认证的时间和费用。
- 注册方式：
- 安装开发者工具
- 开发、测试、上传代码(上传到微信服务器)
- 提交审核
- 发布上线 发布小程序以后，我们才可以在微信中搜索到我们开发的小程序
- 错误查询/性能监控 登陆官网 -> 开发 -> 运维中心
开发基础
一、语法
数据绑定
- 内容
<view>{{title}}view>
Page({
data: {
message: 'hello'
}
})
- 属性(需要在双引号内)
<view id="{{id}}">view>
Page({
data: {
id: '001'
}
})
- 运算符
<view hidden="{{flag ? true : false}}"> Hidden view>
- 其他
<view>{{"hello" + name}}view>
<view>{{name}}{{age}}view>
条件语句
- wx:if
- wx:elif
- wx:else
<view wx:if="{{a > 5}}">6view>
<view wx:elif="{{a < 5}}">4view>
<view wx:else">5view>
for循环
- wx:for
- 默认数组的当前项的下表变量名默认为index，数组当前项的变量默认为item
- 使用 wx:for-item 可以指定数组当前元素的变量名
- 使用 wx:for-index 可以指定数组当前下标的变量名
- wx:for 可以嵌套
- wx:key的意思：为了额列表中遍历的每一个元素指定一个唯一的标识。当数据改变触发渲染层重新渲染的时候，确保使组件保持自身状态并提高列表渲染时的效率。
- 如果被遍历的数组的元素是object，我们可以使用他的某一个值，这个值必须是不重复的数组或者字符串。
- 如果被遍历的数组中的元素是数组或者字符串 *this达标在for循环中item本身。
- 举例：
假设有数据和视图分别为：
data: {
str: 'abcdefg',
lesson: [
{
id: 0,
image: './0.png',
},
{
id: 1,
image: './1.png',
},
{
id: 2,
image: './2.png',
}
]
},
<view wx:for="{{leeson}}" wx:key="id">
注意：上面的wx:key的值为对应的属性，直接写属性的名称key即可,只要这个key是唯一标识
{{item}}{{index}}
view>
<view wx:for={{str}} wx:key="*this">
注意：如果遍历的是字符串，那么可以使用*this来作为唯一标识
{{item}}{{index}}
view>
<view wx:for={{str}} wx:key="*this" wx:for-item="s" wx:for-index="n">
注意：如果想更改默认每项的变量item，可以使用wx:for-item="{{s}}"，这样s就能代替item了，同理，如果想更改每项的索引index，可以使用wx:for-index="n"，这样n就能代替index了。
{{s}}{{n}}
view>
block组件
容器的作用，在页面渲染的时候，不会显示block标签，类似react的<>
<block>
...
block>
事件、事件绑定和事件对象
事件对象可以携带额外信息，如id，dataset
-
事件
- touchstart 手指触摸动作开始
- touchmove 手指触摸后移动
- touchcancel 手指触摸动作被打断，如来电提醒，弹窗
- touchend 手指触摸动作结束
- tap 手指触摸后马上离开
- longpress 手指触摸后，超过350ms在离开，如果指定了时间回调函数并处罚金了这件事，tap事件将不被触发
- longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
- transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
－ animationstart 会在一个 WXSS animation 动画开始时触发
－ animationiteration 会在一个 WXSS animation 一次迭代结束时触发
－ animationend 会在一个 WXSS animation 动画完成时触发
－ touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发
-
事件分类
- 冒泡事件
- 非冒泡事件
-
事件绑定
- 写法：key、value的形式 ，value不用写()
- key 以 bind 或 catch开投，然后跟上事件的类型，如bindtap、catchtap
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
- 事件对象
- type 代表事件的类型
- timeStamp 页面打开到触发事件所经过的毫秒数
- target 触发事件的源组件
- currentTarget 事件绑定的当前组件
data-xxx自定义属性的大小写问题
- data－info 属性是info
- data－inFo 属性是info
- data－in－fo 属性是inFo
全局变量
- 在app.js中写的属性，在所有页面中都可以获取到
开发进阶
路由
- wx.navigateBack 返回
- wx.switchTab 跳转到tabbar的页面
- wx.navigateTo 跳转到另一个页面
- wx.reLaunch 关闭其他所有页面，只跳转到某一个页面
- wx.redirectTo 关闭当前的页面，但不允许关闭tabbar的页面
- switchTo，不允许通过?a=1&b=2&…的形式传递参数，navigateTo可以；同时，获取参数必须在onLoad声明周期函数的options参数中获取
页面的生命周期
-
onLoad 监听页面加载
-
onReady 监听页面初次渲染完成
-
onShow 监听页面显示
-
onHide 监听页面隐藏
-
onUnload 监听页面卸载
-
onPullDownRefresh 监听用户下载动作
-
onReachBottom 监听页面上拉触底事件
-
onShareAppMessage 监听用户点击右上角分享
- 如果没有写这个函数，那么点击右上角会显示“当前页面未设置分享”
-
特别注意：
- 先执行onLoad，再执行onShow，再执行onReady
- onLoad和onReady只执行一次，onShow每次都会执行。
- 比如进入一个页面，会执行onLoad，然后onShow，然后onReady，如果这时候跳到别的页面，然后再回到这个页面，不会执行onLoad和onReady，但是会执行onShow
开发高级
一、获取用户授权(信息)
1.直接在页面展示用户信息，但不能在js获取到用户数据
- 使用open-data内置组件，type属性表示需要展示的用户信息类型，比如头像，昵称等。具体有哪些用户信息，参考文档。
<open-data type="userAvatarUrl">open-data>
<open-data type="userNickName">open-data>
2.在js获取用户信息
- 微信要求button点击后才可以获取,所以需要有一个按钮，并且在按钮上绑定open-type="getUserInfo"属性和属性值，同时，通过bindgetuserinfo事件来获取用户信息
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">button>
getUserInfo: (event) => {
if (e.detail.errMsg === "getUserInfo:ok") {
this.setData({
userAvatarPic: e.detail.userInfo.avatarUrl,
userNickName: e.detail.userInfo.nickName,
})
} else {
console.log("授权失败");
}
}
- 当然，如果用户已经授权过，那么一开始进入页面，就可以调取接口获取到是否已经授权，如果授权，则获取用户信息。
- 在这里，我们可以在onLoad声明周期函数中通过wx.getUserInfo调取用户信息
Page({
/**
* 页面的初始数据
*/
data: {
userAvatarPic: "",
userNickName: '',
},
onLoad: (options) => {
wx.getUserInfo({
success: (res) => {
this.setData({
userAvatarPic: res.userInfo.avatarUrl,
userNickName: res.userInfo.nickName,
})
}
})
},
})
- 也可以通过wx.getSetting接口来判断是否已经授权
- res.authSetting[‘scope.userInfo’]为true表示已经授权。
Page({
onLoad: (options) => {
wx.getSetting({
success: (res) => {
if(res.authSetting['scope.userInfo']){
console.log('已经授权，可以显示用户信息');
}else{
console.log("尚未授权，显示授权按钮");
}
}
})
}
})
二、tabbar的配置
- 在app.json中配置tabbar
{
"pages": [
"pages/index/index",
"pages/home/home",
"pages/my/my"
],
"tabBar": {
"color": "#7a7e83", // 未被选中时的文字颜色
"selectedColor": "#e94840", // 被选中时的文字颜色
"borderStyle": "black", // tabbar上边框的颜色，仅支持black/white
"position": "bottom", // tabber位置，仅支持bottom/top，默认bottom，当为top时，不显示图标
"backgroundColor": "#fff", // 菜单背景色
"list": [{// 这个list，也就是tabbar的菜单限制为2-5个，包含2和5
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "", // icon路径
"selectedIconPath": "" // 选择了icon的路径
},{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "",
"selectedIconPath": ""
}]
}
}
三、头部导航样式配置
- 在app.json文件中，配置一个window属性
{
"pages": [
"pages/index/index",
"pages/home/home",
"pages/my/my"
],
"window": {
"navigationBarBackgroundColor": "#ffffff", // 顶部导航条的背景颜色
"navigationBarTextStyle": "black",// 顶部导航文字的颜色，只有black/white两种颜色
"navigationBarTitleText": "无止课堂",// 顶部导航的标题
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
}
- 特别注意：页面的json文件，能配置window属性，其他pages,tabbar都是不可以的,并且写window的配置时候，不用写window，直接写属性即可，例如
{
"navigationBarBackgroundColor": "#ef2046",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "个人中心",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
}
四、网络超时设置
- 在app.json中，配置networkTimeout属性
{
"pages": [
"pages/index/index",
"pages/home/home",
"pages/my/my"
],
"newtworkTimeout": { // 默认都是20s
"request": 20000, // 请求超时
"connectSocket": 20000, // 连接超时
"uploadFile": 20000, // 文件上传超时
"downloadFile": 20000 // 文件下载超时
}
}
五、分享和自定义分享
1. 分享
- 只需要在需要分析的页面定义一个onShareAppMessage钩子函数即可。
- 如果不写这个onShareAppMessage钩子函数，那么点击右上角会显示"当前页面未设置分享".
2. 自定义分享
- 在当前页面定义一个onShareAppMessage钩子函数，并且返回一个对象，具体如下：
onShareAppMessage(){
return {
title: '自定义转发标题',
path: 'page/user?id=123',
imageUrl:'',
}
}
- title是自定义转发标题
- path是用户点击打开显示的路径地址
- imageUrl是转发显示的图片地址，如果不写，则显示页面截图
3. 引导转发(非诱导违规转发)
六、wx.request请求后台接口
- 可以通过wx.request发送请求
- url表示请求接口
- data表示携带的数据
- header表示设置的请求头
- method表示请求方式
- dataType表示数据的类型
- responseType表示接收返回体的数据类型
- success表示成功的回调
- fail表示接口自然失败的回调
- complete表示接口完成后的调用
- 特别注意：
- success表示成功的回调，这个成功包含后端返回的err
- fail表示接口自然失败的回调，而非后端返回失败，比如直接404
- 当我们在本地模拟接口的时候，可以取消合法校验，具体可以通过右上角的详情，不校验合法域名、web-view(业务域名)、TLS版本及HTTPS证书
- 当我们每个(多个)接口都使用同一个域，那么我们可以设置一个公共域变量，一般设置方法为：
- 在app.js中，然后在当前页面最上方使用const app = getApp(),然后，app.base_url即可获取到base_url属性
- 或者专门设置一个存放变量的config.js，然后导出，在使用的使用导入这个变量即可
getSwiper(){
// 可以通过右上角的详情，不校验合法域名、web-view(业务域名)、TLS版本及HTTPS证书
// 公共域可以有以下几种方式设置：
// 1. 在app.js中，然后在当前页面最上方使用const app = getApp(),然后，app.base_url即可获取到base_url属性
wx.request({
url: app.base_url + '/getSliderss',
data: '',
header: {},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: (res) => {},
fail: (res) => {},//接口404这种才会走这里，如果接口调用成功，返回错误码，是走success的
complete: (res) => {},// 接口完成后调用
})
},
七、自己封装一个http-promise
- 大部分weber其实都是喜欢使用promise的，所以，我们可以基于wx.request和promise去封装一个属于自己的http，其实非常简单，就是写一个http类而已
import {base_url} from './conifg.js';
class HTTP {
request({ url = '', data = {}, header = {}, method = 'GET', success = () => {}, fail = () => {}}){
return new Promise((resolve, reject) => {
this._request(url, data, header, method, resolve, reject);
})
}
_request(url, data, header, method, resolve, reject){
wx.request({
url: base_url + url,
data,
header,
method,
success: (res) => {
const data = res.data;
if (data.status != undefined && data.status == 'ok'){
resolve(data.data);
}else{
reject();
// 这里可以做一些错误的逻辑
}
},
fail: (res) => {
reject();
wx.showToast({
title: '接口出错了',
icon: 'none',
duration: 30000,
})
},
})
}
}
export {HTTP};
八、微信小程序与H5页面的相互跳转-webView
1. 从微信小程序跳转到H5页面(动态)
- 首先需要一个web-view组件，其实就是H5页面的容器，我们只需要跳转到该容器即可显示H5页面。
- 设置WXML,这里的src就是h5页面的地址，当我们跳转到这个页面的时候，就会显示当前src对应地址的H5页面。当然，我们对该页面可以任意修改，因为h5页面只是显示在web-view这个容器中，有点类似iframe
<web-view src="{{H5URL}}">web-view>- 设置js,这里可以通过设置H5URL变量来改变h5地址，这个变量可以通过跳转的url带过来，这样可以实现动态效果
Page({ data: { H5URL: '' }, }), onLoad: function (options) { let url = decoedURIComponent(options.url); this.setData({ H5URL: url }) }, - 然后需要在一个页面设置跳转，跳转到web-view页面，这时候可以携带参数(实现上一步所说的动态效果)
Page({
goToH5(e){
let url = e.target.dataset.url;// 伪代码
wx.navigateTo({
url: '/pages/webview/webview?url=' + encodeURIComponent(url)
})
}
})
2. 从微信小程序跳转到H5页面(静态)
- 把web-view的src写死即可，在此不赘述。
3. 从H5页面跳转到微信小程序
- 首先，如果想在H5页面调用小程序提供的一些接口，就必须在H5页面中引入js
- 具体地址可以看文档
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
- 然后，跳转方式跟微信小程序的路由跳转类似，只是名字改变了，具体如下
| H5跳转到小程序路由 | 小程序路由 | 说明 |
|---|---|---|
| wx.miniProgram.navigateTo | wx.navigateTo | 使用方法与小程序一致 |
| wx.miniProgram.navigateBack | wx.navigateBack | 使用方法与小程序一致 |
| wx.miniProgram.switchTab | wx.switchTab | 使用方法与小程序一致 |
| wx.miniProgram.reLaunch | wx.reLaunch | 使用方法与小程序一致 |
| wx.miniProgram.redirectTo | wx.redirectTo | 使用方法与小程序一致 |
| wx.miniProgram.postMessage | 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件 1.7.1 | |
| wx.miniProgram.getEnv | 获取当前环境 1.7.1 |
九、获取用户收货地址
- 如果需要获取用户收获地址，只需要调用wx.chooseAddress()方法即可
Page({
onChooseAddr(){
wx.chooseAddress({// 调用此方法即可获取用户收获地址
success(res){
console.log(res);// 这里就是用户收获地址信息
}
})
}
})
十、用户地理位置的选择、获取、查看和其他操作
1. 选择
- 如果需要选择用户地址位置，只需要调用wx.chooseLocation()方法即可
Page({
onChooseLocation(){
wx.chooseLocation({// 调用此方法即可选择用户地理位置
success(res){
console.log(res);// 这里就是用户选择的地理位置信息
}
})
}
})
2. 获取
- 如果需要获取用户当前所在位置的地理位置，只需要调用wx.getLocation()方法即可
Page({
onGetLocation(){
wx.getLocation({
type: 'wgs84', // 默认wgs84，返回gps坐标，但是小程序使用gcj02，返回可用不wx.openLocation的坐标
altitude: 'false', //默认false，传入true会返回高度信息，由于高度需要较高精确度，所以会减慢接口返回速度
success: () => {},
fail: () => {},
complete: () => {},
})
}
})
3. 查看
- 如果需要使用微信内置地图查看位置，只需要调用wx.openLocation()
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| latitude | number | 是 | 纬度，范围为-90~90，负数表示南纬。使用 gcj02 国测局坐标系 | |
| longitude | number | 是 | 经度，范围为-180~180，负数表示西经。使用 gcj02 国测局坐标系 | |
| scale | number | 18 | 否 | 缩放比例，范围5~18 |
| name | string | 否 | 位置名 | |
| address | string | 否 | 地址的详细说明 | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success (res) {
const latitude = res.latitude
const longitude = res.longitude
wx.openLocation({
latitude,
longitude,
scale: 18
})
}
})
4. 其他操作
1. wx.stopLocationUpdate()关闭监听实时位置变化，前后台都停止消息接收
- 参考链接：wx.stopLocationUpdate
2. wx.startLocationUpdateBackground()开启小程序进入前后台时均接收位置消息，需引导用户开启授权。授权以后，小程序在运行中或进入后台均可接受位置消息变化。
- 参考链接：wx.startLocationUpdateBackground
3. wx.startLocationUpdate()开启小程序进入前台时接收位置消息
- 参考链接：wx.startLocationUpdate
4. wx.onLocationChange()监听实时地理位置变化事件，需结合 wx.startLocationUpdateBackground、wx.startLocationUpdate使用。
- 参考链接：wx.onLocationChange
5. wx.offLocationChange()取消监听实时地理位置变化事件
- 参考链接：wx.offLocationChange