前言
包括小程序的基本方法、记录本人开发中的问题。
微信文件介绍
微信自定义
1
2
3
| <view wx:for="{{carts}}" wx:key="index" wx:for-index="index1">
<button bindtap="clickMe" data-index="{{index1}}">{{index1}}</button>
</view>
|
接口读取
1
2
3
4
5
6
7
8
9
10
11
| // 生命周期函数--监听页面加载
onLoad: function (options) {
wx.request({
url: 'https://clwy.cn/api/v2/home.json',
success: res => {
this.setData({
recommended_courses: res.data.recommended_courses
})
}
})
},
|
小程序字体
icon适量字体，能够适应各种尺寸而不失真，在小程序中使用icon-font字体。
下载需要的字体图标
转换ttf文件https://transfonter.org/
在微信小程序中使用
在xxx.wxss文件中添加样式内容。打开刚刚我们经过转换的解压出来的文件，找到stylesheet.css，将其中的内容全部复制到xxx.wxss文件中。注意是转换过的那个文件。
打开没有转换过的download.zip解压出来的文件，找到iconfont.css文件，将这个文件中的没有打岔的内容复制到xxx.wxss文件中。@font-face这部分不要，只要下边的这部分。
前台微信登录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| // 登录赋值
wx.setStorageSync('access_token', res.data.access_token)
wx.setStorageSync('token_type', res.data.token_type)
// 跳转tabBar页面会不刷新，解决办法在onShow里再次读取init()初始化函数，或者使用reLaunch跳转；
wx.switchTab({
url: '../user/user'
})
wx.reLaunch({
url: '../user/user'
})
// 如何获取缓存的值
let token_type = wx.getStorageSync('token_type')
let access_token = wx.getStorageSync('access_token')
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| // 在WXapp.js里面
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
wx.request({
url: `http://localhost:3000/auth`,
method: 'POST',
data: {
code: res.code
},
success: res => {
// 将返回的token存储起来，调用其他需要认证接口的时候，可以直接使用
wx.setStorageSync('token', res.data.data.token)
}
})
}
})
},
|
前台后台接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| // 登录，获取openid
router.post('/', async function (req, res, next) {
const code = req.body.code
const params = {
appid: 'wx4a9965771e11b4bd',// 这个要和开发者的软件app一致
secret: 'e94f1c12cb09e31bff0f12826f945b60',// 小程序密钥
js_code: code,// 一次性code
grant_type: 'authorization_code'// 授权类型
}
// 访问微信接口获取openid
const result = await axios({
url: 'https://api.weixin.qq.com/sns/jscode2session',
method: 'get',
params
})
// 判断是否错误
if (result.data.errcode) {
return res.json({
code: 20000,
data: {
success: false,
message: "code已经失效，请重新获取"
}
});
}
const openid = result.data.openid
// 判断用户是否存在，如果存在就直接查出来。不存在就新增一个
let user = await models.User.findOne({where: {openid: openid}});
if (!user) {
user = await models.User.create({openid: openid})
}
});
// 这里的decode是后端利用token反向得到id，中间件中配置
id = req.decoded.user.id
|
微信小程序支付后端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| // 加减number-precision包
// 安装（可以解决小数计算的精度问题）
yarn add number-precision
const NP = require('number-precision')
total.num = NP.plus(total.num, cart.num);
// 支付
// 安装tenpay支付包
yarn add tenpay
const tenpay = require('tenpay');
// 请求
const config = {}// 相关参数
const api = new tenpay(config);
let result = await api.getPayParams({});// 数据库的相关订单信息
success(res, '成功', result)// result就是包含的支付接口信息
|
微信小程序扫码购前台
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| // 解决真机调试ip
// cmd中输入ipconfig，查看IPv4
// 接口地址需要修改，如下
'http://10.0.0.27:3000/auth'
// 支付
wx.requestPayment({
'timeStamp': res.data.timeStamp,
'nonceStr': res.data.nonceStr,
'package': res.data.package,
'signType': res.data.signType,
'paySign': res.data.paySign,
// 支付成功
'success': function(res){} {},
// 支付失败
'fail': function(res){} {
//是否用户主动取消？
if (res.errMsg == "requestPayment:fail cancel") {
} else {// 支付程序故障}
},
// 无论成功或失败
'complete': function(res){} {}
})
// 底部使用fixed布局，会导致有一部分内容遮住
// page中写上margin，或者padding
// 还有问题页面问题，就是page的高度100%去掉
// 半圆
width: 80px;
height: 40px;
border-radius: 80px 80px 0 0;
|