微信小程序
一、微信小程序
微信小程序介绍
微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验
微信公众平台：https://mp.weixin.qq.com/
微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
微信小程序开发者工具
使用技巧
1、配置开发者工具字体大小
路径：设置 -> 外观设置 -> 字号
2、修改文件时自动保存
路径：设置 -> 外观设置 -> 编辑 -> 文件保存
3、页面布局
左侧模拟器，右侧编辑器，右下方调试工具，使用的VS Code内核。
4、快捷新建页面
在app.josn中设置pages保存后，开发者工具会自动创建对应的文件夹和页面文件。
5、不校验合法域名
如果您使用的域名未进行SSL认证或者网址前缀不是https://,可以通过微信开发者工具右上角[详情] -> [项目设置]最下方勾选上 [不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书] 这个按钮
同时你也可以通过这个路径查看当前小程序的App ID和本地目录，可以直接通过此处修改项目的App ID
1 小程序介绍
1.1 小程序的应用
- 支付宝
- 头条
- 百度
- 字节跳动
- 微信
1.2 小程序的介绍
- 运行在某个APP里面，比如微信：没有跨平台限制
- 微信小程序
- Wechat Mini Program 是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一搜即可使用
1.3 市场分类
1.3.1 小程序
- 运行在某个APP里面，比如微信
1.3.2 webapp
- 运行在浏览器上，没有跨平台限制
1.3.3 混合app
- 运行在终端上，有跨平台限制，内部运行的是webapp
1.3.4 原生app
- 运行在终端上，有跨平台限制，内部运行的是机器码01
1 ios
- object-c
- js
2 android
3 react-native
- 一套代码开发两套的应用
- taro
2 开发
2.1 准备
1 官网注册登录
个人开发 记住AppID
2 工具下载
在个人主页中点击
文档进入新页面后点击
工具，点击微信开发者工具选择与自己电脑合适的版本进行下载
进入新的页面
进行下载
2.2 入门小程序
1 创建
2 创建成功
3 开发
项目结构
与vue对比
4 基本创建结构
创建
app.js中新增一个页面(全局配置) ,会自动创建
默认打开第一个位置的页面
页面的结构
5 基本使用
- 插值表达式(小胡子语法)的使用
- 属性绑定
- 事件使用
- 流程语句
- 循环语句
- 显示隐藏语句
- 属性的设置和获取
- 路由的使用
- tabbar的使用
- 请求的使用和封装
- 生命周期的使用
1 插值表达式
2 属性绑定
3 事件使用
- 与vue中事件基本相同,没有参数时默认是event
点击事件
输入框事件
输入框默认边框为白色,需要自己设置home.wxss
4 流程语句
wx:if
wx:else
5 显示和隐藏
6 循环语句
wx:for
wx:for-index
wx:for-item
wx:key
7 属性设置和获取
设置:this.setData()
获取属性:this.data.flag
8 tabbar使用
可参考官网的API文档设置tabber
代码
"tabBar": {
"color": "#dddddd",
"selectedColor": "#16f2e7",
"backgroundColor": "#fff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/home/home",
"text": "主页",
"iconPath": "tabs/home.png",
"selectedIconPath": "tabs/home-active.png"
},
{
"pagePath": "pages/index/index",
"text": "消息",
"iconPath": "tabs/message.png",
"selectedIconPath": "tabs/message-active.png"
}
]
},
9 路由的使用
组件式路由
- 使用navigater
1 可返回
2 不能返回
3 路由传参
编程式路由
只能跳转非tabbar 有返回
wx.navigateTo({url: '/pages/test/test'})只能跳转非tabbar 无返回
wx.redirectTo({url: '/pages/test/test'})能跳转所有页面 无返回 关闭当前页面
wx.switchTab({url: '/pages/index/index'})能跳转所有页面 无返回 关闭所有页面
wx.reLaunch({url: '/pages/index/index'})
传参
10 请求的使用
wx:request- 无跨域问题
请求成功时
请求失败时
11 请求的三种封装
- 封装属于工具类,存放到utils文件夹下
1 简单式封装
- base.js
const baseUrl='http://jsonplaceholder.typicode.com/'
module.exports=(url,data,method)=>{
return new Promise((resolve,reject)=>{
wx.showLoading({
title: 'loading',
mask: true,
success: (res) => {},
fail: (res) => {},
complete: (res) => {
wx.hideLoading()
},
})
wx.request({
url: baseUrl+url,
data: data,
method,
success:resolve,
fail:reject,
complete: (res) => {},
})
})
}
2 完全式封装
- 有加载的效果
const app = getApp()
const request = (url, options) => {
// 请求之前提示加载中
wx.showLoading({title: '加载中...'})
return new Promise((resolve, reject) => {
wx.request({
url: `${app.globalData.baseURL}${url}`,
// url: host + url,
method: options.method,
data: options.method === 'GET' ? options.data : JSON.stringify(options.data),
header: {
'Content-Type': 'application/json; charset=UTF-8',
'x-token': 'x-token' // 看自己是否需要
},
success: resolve,
fail: reject,
// success(request) {
// // console.log(request)
// if (request.statusCode === 200) {
// resolve(request.data)
// } else {
// reject(request.data)
// }
// },
// fail(error) {
// reject(error.data)
// }
complete() {
wx.hideLoading()
}
})
})
}
const get = (url, options = {}) => {
return request(url, { method: 'GET', data: options })
}
const post = (url, options) => {
return request(url, { method: 'POST', data: options })
}
const put = (url, options) => {
return request(url, { method: 'PUT', data: options })
}
// 不能声明DELETE（关键字）
const remove = (url, options) => {
return request(url, { method: 'DELETE', data: options })
}
module.exports = {
get,
post,
put,
remove
}
3 外部式封装
- 第一步:在pages安装flyio
npm i flyio -S - 第二步:将node_modules/flyio 复制到项目工程目录下
- 第三步:严格按照前两步操作否则出现模块找不到错误
- 封装文件如下:
import Fly from '../flyio/dist/npm/wx'
const fly = new Fly()
const host = 'http://jsonplaceholder.typicode.com/'
// 添加请求拦截器
fly.interceptors.request.use(
(request) => {
wx.showLoading({
title: '加载中',
mask: true
})
console.log(request)
// request.headers["X-Tag"] = "flyio";
// request.headers['content-type']= 'application/json';
request.headers = {
'X-Tag': 'flyio',
'content-type': 'application/json'
}
let authParams = {
// 公共参数
'categoryType': 'SaleGoodsType@sim',
'streamNo': 'wxapp153570682909641893',
'reqSource': 'MALL_H5',
'appid': 'string',
'timestamp': new Date().getTime(),
'sign': 'string'
}
request.body && Object.keys(request.body).forEach((val) => {
if (request.body[val] === '') {
delete request.body[val]
};
})
request.body = {
...request.body,
...authParams
}
return request
})
// 添加响应拦截器
fly.interceptors.response.use((response) => {
wx.hideLoading()
return response.data// 请求成功之后将返回值返回
},
(err) => {
// 请求出错，根据返回状态码判断出错原因
console.log(err)
wx.hideLoading()
if (err) {
return '请求失败'
};
}
)
fly.config.baseURL = host
export default fly
常规写法
ES7写法
11 wxs使用
- 类似< script >标签
- 使用较少
- 缺点:
不易操作
不能在里面写注释
语法过于严谨
12 组件的抽离
13 生命周期
- 参考链接下篇
- 微信小程序的生命周期详解
总结
参考
- 码云地址: https://gitee.com/lakerzhang/wx.git
本文参考：微信小程序入门开发超详细笔记(一)