项目准备工作
处理app.js和首页的先和问题
生成条形码
生成二维码
城市的三级联动
支付宝小程序.jpeg
1、项目准备工作
项目的准备工作做的不是很多。在支付宝小程序踩的坑，主要就是让我很不能接受这个ide工具是真的不是怎么样。
因此我选择了vscode去编写代码。原来ide只用来调试和模拟器。
1.1my.httpRequest的请求封装。
在请求中，会出现error。一共有这几种情况
- error 11 是代表无权跨越
- error 12 是网络错误
- error 13 是请求超时
- error 14 是解码失败
- error 19 是请求错误
因为支付宝小程序是完全支持es6的。当然部分语法不支持。详情需要查看官方文档。因此我们可以写入Promise 对小程序的Promise支持。（微信小程序是需要导入Promise库用以支持）
function myPromisify(fn) {
return function (obj = {}) {
return new Promise((resolve, reject) => {
obj.success = function (res) {
//成功
resolve(res)
}
obj.fail = function (res) {
//处理失败
reject(res);
console.log(`接口请求失败 ，错误原因 ${JSON.stringify(res)}`);
switch (res.error) {
case 11:
my.showToast({
type: 'exception',
content: '无权跨越',
duration: 1000,
});
break;
case 12:
my.showToast({
type: 'exception',
content: '网络出错了',
duration: 1000,
});
break;
case 13:
my.showToast({
type: 'exception',
content: '请求超时',
duration: 1000,
});
break;
case 14:
my.showToast({
type: 'exception',
content: '解码失败了',
duration: 1000,
});
break;
case 19:
my.showToast({
type: 'exception',
content: '请求发生了错误',
duration: 1000,
});
break;
default:
my.showToast({
type: 'none',
content: '请求发生了错误',
duration: 1000,
});
break;
}
}
fn(obj)
})
}
}
//无论promise对象最后状态如何都会执行
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => { throw reason })
);
};
function dataRequest(url, method, data) {
var param = JSON.parse(data);
param['xx'] = 'xx';
param['xx'] = 'xx';
param['xx'] = 'xx-M';
param['xx'] = 'Cxxx;
var dataRequest = myPromisify(my.httpRequest)
console.log(`接口 : ${url} 请求参数为 ： ${JSON.stringify(param)}`);
return dataRequest({
url: url,
method: method,
data: JSON.stringify(param),
headers: {
"Content-Type": "application/json"
},
})
}
将方法导出
module.exports = {
dataRequest: dataRequest
}
请求结果.png
1.2 工具类方法的写入 写入utils/util.js
在项目中，我只封装了时间类，和 条形码，二维码的方法。
具体的导出方法和上面的方式一样。这里留下时间戳的方法记录
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
导出时间戳的方法
module.exports = {
formatTime: formatTime,
}
1.3请求接口地址，统一封装
每个项目中都会请求大大小小的接口地址。因此需要统一存放地址路径。
var connect ={
KRISLEE：‘�http://www.baidu.com‘
}
module.exports = connect
1.4如何导入
导入是通过import来进行导入模块，引用模块，进行操作
import event from ‘../../event.js’
2、处理app.js和首页的先后问题
在小程序上，我们遇到这个问题。在加载app.js的时候，我们会先调用接口来进行获得支付宝小程序的openid，通过openid来换取userid。然后homepage来获得userid 来进行操作，但是我们遇到这个问题。homepage的js有时候会在app.js之前运行。因此页面需要通过下拉刷新来执行。
2.1 解决方式。
定时器
事件监听
定时器的方法就是延时执行主要的钩子函数里的方法。现在我们主要来说说事件监听的方法。
附代码
var events = {};
function on(name, self, callback) {
var tuple = [self, callback];
var callbacks = events[name];
if (Array.isArray(callbacks)) {
callbacks.push(tuple);
}
else {
events[name] = [tuple];
}
}
function remove(name, self) {
var callbacks = events[name];
if (Array.isArray(callbacks)) {
events[name] = callbacks.filter((tuple) => {
return tuple[0] != self;
})
}
}
function emit(name, data) {
var callbacks = events[name];
if (Array.isArray(callbacks)) {
callbacks.map((tuple) => {
var self = tuple[0];
var callback = tuple[1];
callback.call(self, data);
})
}
}
exports.on = on;
exports.remove = remove;
exports.emit = emit;
当app.js完成某个操作的时候，event.emit("finish",data),这时候，主要的钩子函数主要负责监听，拿到事件名称和数据，进行操作 event.on("finish",(data)=>{}),最后要在页面卸载的时候同时，卸载事件监听函数 event.remove("finish",this)
3、生成条形码和二维码
在这里。我就废话不多说了。附近之后在文章的后面贴上。条形码和二维码的文件库。使用的方法，
使用的方式和方法也很简单。
3.1导入文件库
import 文件库 from xxx.js
3.2生成使用方法
function barc(id, code, width, height){
console.log(convert_length(width));
console.log(convert_length(height));
barcode.code128(my.createCanvasContext(id), code, convert_length(width), convert_length(height))
console.log("执行完毕")
}
function qrc(id, code, width, height) {
qrcode.api.draw(code, {
ctx: my.createCanvasContext(id),
width: convert_length(width),
height: convert_length(height)
})
}
function convert_length(length) {
return Math.round(my.getSystemInfoSync().windowWidth * length / 750);
}
3.3 使用
在文件里。我在支付宝小程序里，在onLoad方法里使用，画布并不会绘图出二维码和条形码。原因我至今还是没想明白。所以我放钩子函数onReady方法里使用。
在axml文件里。指定唯一标识id
<canvas id="qrcode" style="width:400rpx;height:400rpx;"/>
在js文件里，onReady()方法里使用
onReady(){
wxbarcode.qrcode('qrcode', this.data.value, 400, 400);
}
条形码.png
二维码.png
4、城市的三级联动
4.1需要导入city.js
这是一个城市列表。一般省，直辖市 是第一梯队，一般的市是第二梯队，之后的县，区是第三梯队。如下
{
"id": "320900",
"name": "盐城市",
"parent_id": "320000",
"level_type": "2"
},
{
"id": "320902",
"name": "亭湖区",
"parent_id": "320900",
"level_type": "3"
},
{
"id": "320903",
"name": "盐都区",
"parent_id": "320900",
"level_type": "3"
},
{
"id": "320921",
"name": "响水县",
"parent_id": "320900",
"level_type": "3"
},
4.2 对city.js的操作
首先需要我们对所有的省市区进行集合操作，把他们归集于一起，方便之后的槽子
// 所有的 省市区 集合
var result_province = cityData_new.filter(
function (value) {
return (value.level_type == 1);
}
);
var result_city = cityData_new.filter(
function (value) {
return (value.level_type == 2);
}
);
var result_county = cityData_new.filter(
function (value) {
return (value.level_type == 3);
}
);
之后，我们定义当前选定的省市区
之后对城市选择进行操作。比如选择的江苏省，那么之后就要带出南京市，苏州市，选择了南京市，就要带出建邺区之类的操作。
贴出代码 ：
cityChange: function (e) {
var val = e.detail.value // 改变的picker 每一列对应的下标位置
var t = this.data.cityValue; // 原本的位置
if (val[0] != t[0]) { // 第一列改变
city_s = [];
county_s = [];
var current_id = province_s[val[0]].id;
city_s = this.selectResultAction(result_city, current_id);
var current_city_id = city_s[0].id;
county_s = this.selectResultAction(result_county, current_city_id);
this.setData({
citys: city_s,
countys: county_s,
cityValue: [val[0], 0, 0]
})
return;
}
if (val[1] != t[1]) {// 第二列改变
county_s = [];
var current_city_id = city_s[val[1]].id;
county_s = this.selectResultAction(result_county, current_city_id);
this.setData({
countys: county_s,
cityValue: [val[0], val[1], 0]
})
return;
}
if (val[2] != t[2]) {// 第三列改变
this.setData({
county: this.data.countys[val[2]],
cityValue: val
})
return;
}
},
以上是对city进行操作。前端的页面也是需要我们考量的地方。支付宝小程序。有<picker-view> 的标签，以及 <picker-view-column>这样的标签，更加快速的完成了我们想要的操作。
之后我会贴出，相关附件。
以上就这么多，之后会慢慢补充，慢慢完善
网友评论