送给写小程序的你。
声明：本人也是菜鸟一只，写的很差的地方，大佬们指点指点。javascript
欢迎来点点个人博客html
微信小程序商城，持续更新。（已经跳槽了，可是仍是小程序相关的项目/斜眼）前端
先说说写小程序的渊源吧，我以前认识的大佬写了一个比较简单的小程序，我改了改样式因而成功的有了个人第一个小程序。而后我在找工做的时候，简历上写了这么一回事，结果进来以后，leader语重心长的对我说，公司的小程序商城就教给你了，重点是公司没有一我的会微信小程序。WTF，不是招我进来写VUE的吗?java
因而就开始了我从零开始写微信小程序商城之路。android
微信小程序的官方文档什么的我就不说了，那是确定要看的。说说我这几天开始写我遇到的问题。但愿对将要写小程序的你能有一丝丝帮助，由于本人也很菜。ios
一、微信小程序之rpx
在微信官方的文档中，咱们看到这样一句话：git
在 iPhone 6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。开发微信小程序时设计师能够用 iPhone 6 做为视觉稿的标准。也就是说，设计师在设计小程序时，能够这样作：es6
- 直接以 iPhone 6 的屏幕尺寸（375×667）用做视觉稿尺寸，1 px = 0.5 rpx；
- 以 1 px = 1 rpx 的标准，将设计稿尺寸设定为 750×1334。
其实总的来讲就是，你跟UI小姐姐说一声，而后就能够很爽的写样式了。github
二、微信小程序之容器视图
- view 其实就是div，嘿嘿嘿就是这么简单粗暴的解释。
- scroll-view 可滚动视图区域。 这个须要注意的是，横向滚动的视图区域。重要的是这两个行内样式，其余的官方文档也说的比较清楚。
<view class="supply-scroll bg">
<scroll-view class="scroll-box" scroll-x="true" style="width: 100%;white-space: nowrap; display: flex" >
<view class="scroll-items" wx:for="{{scrollList}}" wx:key="index" data-index="{{index}}" style="display: inline-block">
<image src="{{item.url}}" class="scroll-image"/>
</view>
</scroll-view>
</view>web
三、微信小程序之UI框架
这个，颇有意思，当我写完一个我以为颇有灵性的选项卡的时候，之前哥们告我微信小程序有个框架你看看去。。。
<view wx:for="{{tab}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}"
bindtap="switchTab" class="tab-list {{tabIndex === index?'on':''}}">
{{item.name}}
</view>
不BB，直接上地址 github.com/Tencent/weu…
先写到这里，周六加班的午休时间，冒着被同时打死的危险写的，若是有什么写的很差的地方，请你们多多包涵，我也还会分享我遇到的问题。
最近又看到有赞的微信小程序UI仍是老规矩直接上地址：
四、微信小程序之switchTab
页面跳转你们官网上看的navigator用法你套着用就能够了，今天分享一下我在小程序中遇到的页面跳转的问题。我写的是一个电商商城小程序，跳转到详情页以后有两个点击跳转的icon如图：
聪明的你确定猜出来这两个icon是跳转到哪的，确定也是bindtap，而后wx.navigator就搞定了。两个简单的页面跳转嘛，而后竟然就是这两个问题卡了我一个多小时，后来仍是在微信群里问大佬们才解决的，由于本身看文档不仔细，跳转的这两个页面是微信官方底部tab的路径如图：
问题是出在官方的tabbar中你用了这几个路径如图：
而后解决方法为:
handleGoIndex: function() {
wx.switchTab({
url: '/pages/index/index'
})
},
handleGoCart: function() {
wx.switchTab({
url: '/pages/cart/index'
})
}
五、微信小程序之禁止页面下拉
有的时候你会遇到不让页面下拉，若是你觉得我说的是下拉刷新的api的话那就图样了。就是不让你下滑的时候出来那个白条。直接上代码了：
<view catchtouchmove="stopDrag" class="container">
stopDrag(){
return false;
},
可是这个慎用，我也想在这里若是有大神能指点指点就最好了，这个的效果是可视区域所有静止滑动... 拼多多的小程序首页就是不会出现那个下拉的白条，但能上滑看商品信息，求教～
六、微信小程序之页面深度
在测试本身的项目的时候，发现明明逻辑没问题，语法也没问题。忽然想起来小程序的页面栈是五个，因而特别中二的数了一下本身的页面跳转哈哈... 才发现当时本身的理解是错误的，刚开始不细心看文档，我觉得这五个页面是超过五个会把新的加进页面栈，第一个打开的销毁。我就无脑用wx.navigateTo，遇到这个问题后用了 wx.redirectTo就解决了。可是谁让我好学呢，因而发现一个大神写的特别完美的理解小程序页面跳转的原理。
（如今深度，变成了10层，可是在ios 10的部分系统下，仍是有bug的，仍是要考虑页面深度这种场景的。）
依然是嘿嘿:小程序基础篇之页面路由-微信小程序俱乐部 www.wxappclub.com。
七、微信小程序之上拉加载
我如今公司的项目作的是电商的小程序，下拉刷新，官网写的很明确不能与scroll-view同时使用。我是在脑子瓦特的状况下，onReachBottom 和 scroll-view的bindscrolltolower 都用了。通过个人实践，推荐你们用 onReachBottom。若是是一些tab里面也有下拉刷新，这个就很方便直接上代码：
onReachBottom() {
let isPush = this.data.index,
val = this.data.inputVal;
this.setData({
isBtnShow: true
});
if (isPush ==1) {
let num = this.data.limitIndex;
this.setData({
limitIndex: num+1
})
//关于上拉加载的性能优化
setTimeout(()=>{
// 给后端传下拉刷新的次数+1
const data = {
limitIndex: this.data.limitIndex
};
utils.sendRequest(api.AllGoodsUrl, data, this.handleReachBottom.bind(this));
},1500)
};
if (val != '') {
setTimeout(()=>{
let num = this.data.limitIndex;
this.setData({
limitIndex: num+1
})
// 给后端传下拉刷新的次数+1
const data = {
limitIndex: this.data.limitIndex,
data:{
name: this.data.inputVal,
}
};
utils.sendRequest(api.AllGoodsUrl, data, this.handleLoadMore.bind(this));
},1500)
};
},
这段代码主要就是判断tab的状态来延时请求接口。实现效果以下图：
复制代码
这就是我用上拉加载的实践，但愿有大神能提出更好的建议。
八、微信小程序之数据交互
说到这里顺便把个人一些关于数据交互的一些经验分享一下
function sendRequest(path, data, callback) {
wx.request({
url: path,
data: data,
header: {
'content-type': 'application/json'
},
method: "POST",
success: callback,
fail:(res)=>{
console.log(res)
}
})
} 把微信请求封装起来
还有项目里面要用到的接口以下
//promise 方式
function promiseRequest(url, data = {}) {
return new Promise(function (resolve, reject) {
wx.request({
url: url,
data: data,
method: 'POST',
header: {
'Content-Type': 'application/json',
},
success:(res) => {
if (res.statusCode == 200) {
resolve(res);
} else {
reject(res.errMsg);
}
},
fail: (err) => {
reject(err)
console.log("failed")
}
})
});
}
新增 promise 请求方式
//没有参数就传空
utils.promiseRequest(api.BannerUrl).then(res => {
if(res.data.error == 0){
//dosomething。。。
}else {
utils.showModal(res.data.err_msg)
}
});
复制代码
但愿有大神能帮忙一下小程序的组件化最佳实践~
九、微信小程序之Android请求失败的坑
我当时遇到的状况是，在模拟器和IOS环境下请求数据都是没有任何问题的，在测试android环境时发现请求失败以下图
这个错还让我跟运维的大哥撕了半天哈哈， 首先出现这个错，兄弟这个锅完彻底全就能甩给运维的大哥，不留任何余地。 而后能够帮大哥提供一些资料，一步步排查，先查你项目绑定域名：
一、https证书问题 ：ssl证书配置须要使用pem,不使用crt, ，
二、服务器端的版本信息：TLS版本的问题，该问题在微信小程序官方文档中已经说起到，服务器TLS版本必须支持 1.2 （启用1.2，禁用1.1和1.0等低版本），
三、前两种方法是在查阅资料有人说是可解决的，可是对于咱们公司最后在排查前两项以后，运维大哥用Nginx转发了以后，解决了安卓请求失败的问题。但愿能够帮到你们吧~
十、微信小程序之地址页面三级联动
说道这个问题，现给你们贴一个地址，很是感谢大神的开源：blog.csdn.net/sinat_17775…
你们能够看到代码以后，先理清你要处理的后端数据和存地址的要求等等，我遇到的问题是
后端给个人数据里面有每个地址对应的ID，好比北京：2 北京：50 东城区：500
处理这个数据的时候，我根据原来大神的代码作了一些修改，
let val = e.detail.value,
t = this.data.values,
cityData = this.data.cityData,
index = this.data.id,
list = this.data.addrList;
list[index].area = true;
try {
if (val[0] != t[0]) { //当val是选择省份的时候
const citys = [];
const countys = [];
cityData[val[0]].child.map(item => citys.push({name:item.name,id:item.id}));
cityData[val[0]].child[0].child.map(item => countys.push({name:item.name,id:item.id}));
list[index].provinceName = this.data.provinces[val[0]].name;//省份
list[index].cityName = cityData[val[0]].child[0].name;//城市
list[index].districtName = cityData[val[0]].child[0].child[0].name;//地区
list[index].province = this.data.provinces[val[0]].id;//对应的传值ID
list[index].city = cityData[val[0]].child[0].id;//对应的传值ID
list[index].district = cityData[val[0]].child[0].child[0].id;//对应的传值ID
this.setData({
citys: citys,
countys: countys,
values: val,
value: [val[0], 0, 0],
addrList: list
})
return;
}
if (val[1] != t[1]) {//当val是选择城市的时候
const countys = [];
cityData[val[0]].child[val[1]].child.map(item => countys.push({name:item.name,id:item.id}));
list[index].cityName = this.data.citys[val[1]].name;// 选择城市
list[index].city = this.data.citys[val[1]].id;//对应的传值ID
list[index].districtName = cityData[val[0]].child[val[1]].child[0].name;//选择城市对应的地区
list[index].district = cityData[val[0]].child[val[1]].child[0].id;//对应的传值ID
this.setData({
countys: countys,
values: val,
value: [val[0], val[1], 0],
addrList: list
})
return;
}
if (val[2] != t[2]) {//当val是选择地区的时候
list[index].districtName = this.data.countys[val[2]].name;//选择地区
list[index].district = this.data.countys[val[2]].id;//对应的传值ID
this.setData({
county: this.data.countys[val[2]].name,
values: val,
addrList: list
})
return;
}
} catch(e) {
// statements
console.log(e);
}
list里面是有 收货人，电话，等等信息 可是我只操做改变数组里面地址改变的信息，
复制代码
布局方面须要作一些修改的地方就是
我贴了这么多图，是由于我真不会说了，调这个页面调了两天。只能提供个大概方向，仍是得一步步处理数据，goodluck~
十一、微信小程序之Android环境下的横向滚动
<view class="tab bg">
<scroll-view class="" scroll-x="true" style="width: 100%;white-space: nowrap; display: flex;overflow-x: auto;">
<view style="display: inline-block" bindtap="switchIndex" class="tab-list {{index === 1 ?'on':''}}">首页</view>
<view wx:for="{{tab}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}"
style="display: inline-block" bindtap="switchTab" class="tab-list {{tabIndex === index?'on':''}}">
{{item.nav_name}}
</view>
</scroll-view>
</view>
代码一贴其实当测试小哥告诉你安卓tab不能滑的时候，你只须要加一个overflow-x: auto;哈哈哈
复制代码
十二、微信小程序之Ios环境下mp4播放问题
当你遇到你的mp4格式有的能播放，有的不能播放的话，你只须要看一下你的mp4编码格式，必须是h264格式才行。
1三、微信小程序之微信支付的坑
这个由于我也是第一次写小程序嘛，后端的大哥，在H5的商城里什么都实现了一次了，非说各类没问题，只贴两个图就明白了第一个
还有就是必定要让后端好好看微信支付的文档，通常公司开发商城都是服务商版的支付服务，这里就是我和后端大哥的甩锅之路，他没有绑定我得小程序appid，而后各类说调不通。。。
去这里配置好，前端只须要调API传值就好
1四、微信小程序之图片上传
很久没更新了，被公司业务搞得焦头烂额。
老规矩，直接上代码了。
handleCancelPic() {
let id = this.data.dbId;
wx.chooseImage({
count: 3, // 默认9
sizeType: ['compressed'], // 能够指定是原图仍是压缩图，默认两者都有
sourceType: ['album', 'camera'], // 能够指定来源是相册仍是相机，默认两者都有
success: res => {
// 返回选定照片的本地文件路径列表，tempFilePath能够做为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
this.setData({
src: tempFilePaths
})
upload(this,tempFilePaths,'','');
}
})
}
而后一个封装好的方法
function upload(page, path,way,id) {
console.log(path)
wx.showToast({
icon: "loading",
title: "正在上传"
});
var test = [],
that = this;
for (var i = 0; i<path.length; i++) {
wx.uploadFile({
url: api.CancelImg,
filePath: path[i],
name: 'file',
header: { "Content-Type": "multipart/form-data" },
success: res => {
test.push(res);
wx.setStorageSync('cancelImg',test)
console.log(test)
if (res.statusCode != 200) {
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
return;
}else {
wx.showModal({
title: '提示',
content: '上传成功',
showCancel: false
})
}
},
fail: function (e) {
console.log(e);
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
},
complete: function () {
wx.hideToast(); //隐藏Toast
}
})
}
这个是多个图片上传的方法，单个图片上传的话，把循环去掉就好。主要是由于微信官方默认的就是一次上传一张图片这个很蛋疼。只能这么搞了。。。
复制代码
1五、微信小程序之电商购物车逻辑
接着再给你们分享一个关于小程序购物车全选的逻辑处理，这个仍是要感谢个人老妹教导我，一个开发人员作东西必定要严谨，无论UI设计的有多丑，该有的逻辑你必定要作到。
首先咱们要作到的就是，当用户点击第三个商品时 全选按钮自动选中，或者全选以后，只要有一个商品不选中，全选按钮也得变更。先给你们看一下代码：
你要在页面onload时候定义一些你须要每次渲染的数据
data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
const index = e.currentTarget.dataset.index;// 获取每个点击的购物车ID
let carts = this.data.carts,
selected = carts[index].select,
all = this.data.allclick;
carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
selectAllStatus: true
}):this.setData({
selectAllStatus: false
});
this.getTotalPrice();
},
上面的代码，先作的就是单选的页面渲染效果。判断部分的代码就是最主要的处理全选逻辑的一步。相信你看到这里也注意到我在data里定义了一个allclick的空数组，而后就是接下来的逻辑：
复制代码
- 按钮选中时取出对应item的角标放到新的arr里，这里由于我以前结算的逻辑已经搞好了，我就随便往数组里push数据，但其实能够做为对应商品的更重要的一些数据处理。
- 按钮不选中是重新的arr里找到这个item对应下标的数据移除
- 完成上面两步处理以后，每次按钮状态发生变化的时候判断arr的长度和cart的长度。
这就是个人处理，也可循环，实现的方式有不少，只是拿出来让没有接触过的小伙伴作个参考～
data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
const index = e.currentTarget.dataset.index;// 获取每个点击的购物车ID
let carts = this.data.carts,
selected = carts[index].select,
all = this.data.allclick;
carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
selectAllStatus: true
}):this.setData({
selectAllStatus: false
});
this.getTotalPrice();
},
这段代码也仍是先处理全选的状态，而后就是关联状态的处理，
复制代码
- 当全选没有勾选的时候所有改变商品信息里的按钮为false，直接清空allclick数组。
- 当全选勾选的时候所有改变商品信息里的按钮为true，先清空，接着从新push，再赋值。
通过这几步操做以后就解决了全选这方面的全部逻辑，以为有用的小伙伴，记得评论，关注哟～
1六、微信小程序之使用Map对象
这是个人梁master跟我提的这件事，我是小程序，她是Android，项目同样。我俩关系好，而后她教个人用的这个Map对象，其实这个是java的map对象。用起来真的很爽，不废话了直接上代码。
这个在es6的标准里面也推出了Map对象。借用阮大神书里面的一段话：
JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），可是传统上只能用字符串看成键。这给它的使用带来了很大的限制。
const data = {};
const element = document.getElementById('myDiv');
data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"
上面代码原意是将一个 DOM 节点做为对象data的键，可是因为对象只接受字符串做为键名，因此element被自动转为字符串[object HTMLDivElement]。
为了解决这个问题，ES6 提供了 Map 数据结构。它相似于对象，也是键值对的集合，可是“键”的范围不限于字符串，各类类型的值（包括对象）均可以看成键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。若是你须要“键值对”的数据结构，Map 比 Object 更合适。复制代码
感兴趣的小伙伴能够移步es6入门 map set
let localMap = new Map(),// 定义一个全局的MAP对象
typeCode = ''; // 点击分类里面的细分选项卡
handleClickTabs(e) {
let id = e.target.dataset.index,
code = e.target.dataset.id;
typeCode = code;// 这里定义code，在请求回调里面使用
this.setData({ leftTab : id });
if (localMap!=null) {// map对象
let list = localMap.get(typeCode);//获取对应分类的type的code
if (list!=null) {//map里面有值，渲染页面
this.setData({ tabSonList:list }) }else {//map里面没有值，去请求接口 const data = { goodsTypeCode: code };
utils.sendRequest(api.ClassifySon, data, this.handleGoodsSon.bind(this)); }
}else { const data = { goodsTypeCode: code };
utils.sendRequest(api.ClassifySon, data, this.handleGoodsSon.bind(this)); } }, //分类里面的内容 handleGoodsSon(res) {
let list = res.data; localMap.set(typeCode,list)//存对应typeCode的list
this.setData({ tabSonList:list }) },
复制代码
这样就实现了，对选项卡的优化，若是接口数据变多了的话，会从新赋值。 虽然是本身给本身加戏，但这是也是个人一种工做态度，学习了新东西，还让优化了项目。
1七、小程序之全局变量缓存的问题
这个问题的出现是由于，在input的事件，我没有找到更好的能监听键盘收回的方法，也是为了更好的用户体验吧，因此随之而来的问题就是全局变量，在赋值以后用户退出这个页面，全局变量被微信缓存了，而后形成，用户输入过一次以后，修改手机号失败的bug。
let Btel = '',//防止用户恶意修改手机号
Byzm = '';
handleTel(e) {// 这里修改用户输入的手机号
this.setData({
tel:e.detail.value
})
},
handleYzm(e) {
this.setData({
Yzm:e.detail.value
})
Byzm = e.detail.value;
let psd = this.data.psd,
yzm = this.data.Yzm;
yzm == psd ? this.setData({isYzm:0}):'';
},
handleGetYzm() {
let reg = common.telReg,
val = this.data.tel;
if (!reg.test(val)) {
wx.showModal({
content:'请输入正确的手机号',
showCancel:false,
confirmColor:'#3cc51f',//默认值为#3cc51f
success:res =>{
if(res.confirm){
this.setData({
tel:''
})
}
}
})
}else {//发送验证码的时候用全局变量的手机号
Btel = val;// 这里是全局的手机号
this.setData({
isReset : true,
isNoClick: true
})
const data ={
tel:val//传的是全局变量
};
utils.sendRequest(api.YanZhengMa, data, this.handleGetYzmSucc.bind(this));
//button 定时器
let time = setInterval(()=>{
let phoneCode = this.data.time;
phoneCode --
this.setData({
time : phoneCode
})
if(phoneCode == 0){
clearInterval(time)
this.setData({
isReset : false,
isNoClick: false,
time:60
})
}
},1000)
}
},
//而后这一步是校验了用户在请求完验证码接口后 有没有修改手机好 而后保存
handleSave() {
let name = this.data.name,
telNum = this.data.tel,
yzm = Byzm,
status = this.data.isYzm,
card = wx.getStorageSync('UserCard');
let timestamp= new Date().getTime();
if (yzm == '') {
wx.showModal({
content:'请输入验证码.',
showCancel:false,
confirmColor:'#3cc51f'
})
return false;
}
if (name!=''&&telNum!='') {
if(Btel != telNum) {
utils.showModal('手机号发生变化，请从新获取验证码。');
}else {
const data ={
distribution_id:card.distribution_id,
post:{
user_name:name,
user_tel:Btel,
user_code:yzm
},
user_id:card.user_id,
password:yzm+timestamp
};
utils.sendRequest(api.BindTel, data, this.handleSaveTel.bind(this));
}
}else {
utils.showModal('请填写完整信息哟');
}
},
// 而后在 保存成功以后 用户点击肯定 清空 全局变量 也能够在隐藏和卸载的生命周期里面清空全局变量。
handleSaveTel(res) {
if (res.data.error == 0) {
let go = this.data.go,
id = res.data.data.id,
lv = res.data.data.level;
wx.showModal({
content:'绑定成功~',
showCancel:false,
confirmColor:'#3cc51f',//默认值为#3cc51f
success:res =>{
if(res.confirm){
Byzm = '';//对小程序全局变量缓存进行清除
if (go) {
wx.redirectTo({
url: '/pages/user/cash/cash'
})
}else {
if (id != 0) {
let card = wx.getStorageSync('UserCard');
card.distribution_id = id;
card.distribution_level = lv;
wx.setStorageSync('UserCard',card);
wx.setStorageSync('seller', true)
}
wx.switchTab({
url: '/pages/user/index'
})
}
}
}
})
return false
}else {
utils.showModal(res.data.err_msg);
}
}
复制代码
1八、小程序之微信支付的深坑
事情是这样的，由于公司主体变动，避税之类的事。咱们公司的小程序，须要从新换绑微信支付，在财务给咱们申请号商户号以后，咱们排期半夜来切环境。 我记得是一个周四的晚上，十二点开始切环境，而后 大概后端代码数据库都准备好以后，咱们从新绑定微信支付，觉得大功告成。周五还能弹性一上午美滋滋～
没想到 刚交个测试，说微信支付不能用，提示咱们没有受权。wtf，刚绑定好的你这样提示，不合适吧。按照报错一查，我去小程序 社区里一看。
你敢信，微信开放平台的商户号和公众号商户号，是两回事。 小程序之支持公众号的商户号，可是你在开放平台绑定小程序微信支付的时候，官方给你的提示是 绑定成功～。
而后 就变成了 早上七点下班。。。
血的教训呀！！！
1九、小程序之登录改版
https://juejin.im/post/5b0e9c6351882515887ed760
嘿嘿，写完贴个地址得了~
20、小程序之webview在ios下访问不到的坑
ios端小程序有的页面白屏，后来查到的问题是web-view的src中携带的参数中含有中文，ios端是不容许连接中有中文的，因此只能给中文转码了，h5页面提取参数的时候再解码一下就能够了
1 中文转码
encodeURI(url)1复制代码
2 解码
decodeURI(url)复制代码
还有一些关于webview的知识点
- 每一个页面只能有一个<web-view/>，<web-view/>会自动铺满整个页面，并覆盖其余组件，小程序对webview的监控状态基本没有，只能设置src设置url。
- 关于小程序和web-view的通讯，<web-view/> → 小程序只能经过JSSDK 1.3.0提供的接口返回小程序页面，设置参数来传值，反之，小程序到webview也是同样的，只能是src的路径带上参数；
- web-view不支持支付能力,是指没法唤起小程序的直接支付窗口，对于h5的那套支付应该是支持的，可是web-view 里边无法使用 微信支付的 JSAPI，也就是可能能够h5的相关的的支付中心来支付；
- 关于层级，在webview中能够无限跳转，对于导航条返回和物理键返回都会回到上一个页面直到退出webview，就像
history.back。 - webview中的html的title会自动放到小程序的头部做为标题；
2一、小程序之调用上个页面方法
由于，如今的项目是小程序嵌套h5，金融类目，作人脸识别 在小程序，而后购买理财、存款之类的在h5里面，识别以后要根据原来的路径就回到原来的h5页面。
记得官方文档上面说过getCurrentPages() 不要改变路由，可是也能获取到页面的方法，因而就能够实现个人需求喽。代码以下：
let pages = getCurrentPages();
let lastpage = pages[pages.length - 2]
if (lastpage.route === "pages/webview/webview") {
lastpage.changeUrl();
setTimeout(() => {
clearInterval(this.data.time);
wx.navigateBack({})
}, 500)
}复制代码
而后我只须要在我webview的js里面写更换去h5的路由：
changeUrl() {
if (wx.getStorageSync('faceSucc')) {
let url = app.config.h5url + "/" + Util.formatParm(app.globalData.face_retCode, app.parm.h5_servid_url); // console.log(app.globalData.header) // url = url + "?param=" + encodeURIComponent(JSON.stringify(app.globalData.header)) // 缓存bug
if (url.indexOf("?") !== -1) {
url = url + "&d=" + new Date().getTime()
} else {
url = url + "?d=" + new Date().getTime()
}
this.setData({
url: url
})
}
},复制代码
就能够在back的时候 已经修改了 上个页面的 h5的路由。是否是很方便呢。
2二、小程序之使用AES加密和NPM
项目须要aes加密，找了一下前端能够用crypto-js来作。有人写好的js文件之类的，粘贴过来就能够准备开发了。可是想起了我龙哥的话，写代码要优雅。正好也一直关注着微信小程序生态，知道可使用npm了。正好有crypto-js的包，说干就干。
首先在小程序的项目目录里面 执行 npm init --yes， 生成一个package.json。还有官方文档的建议，下载npm包的时候 执行 npm install --production。
npm install --production --save crypto-js。
这样我们想要的就都有了，主要说一下aes加密，啦啦啦。
首先先引入嘛
/** * aes加密 * {加密字段} word * {秘钥} keyStr */
function encrypt_aes(word, keyStr) {
let key = CryptoJS.enc.Utf8.parse(keyStr);
let srcs = CryptoJS.enc.Utf8.parse(word);
let encrypted = CryptoJS.AES.encrypt(srcs, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
let result = encrypted.toString();
console.log("aes加密字段", result)
return result;
}
/** * aes解密 * {加密字段} word * {秘钥} keyStr */
function decrypt_aes(word, keyStr) {
let key = CryptoJS.enc.Utf8.parse(keyStr);
let decrypt = CryptoJS.AES.decrypt(word, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
let result = CryptoJS.enc.Utf8.stringify(decrypt).toString();
console.log("aes解密字段", result)
return result;
}复制代码
效果如图：
这样就能够实现 前端aes加密了。能够送我一朵小发发～
---------------------------------------------------------------------
一步步记录本身的踩坑历程~我要作到我技术不是最好的，但我给你总结的小程序的东西是最简单粗暴的哈哈哈
- 1. 送给曾经的我，也写给如今的你
- 2. 送一个竖屏给你写代码
- 3. 写给你的JavaScript
- 4. 送给你们的爱
- 5. 阿里P7高级架构师写给Java程序员的职业规划——送给还在奋斗的你
- 6. “小红书”——给你安利几个小程序的“坑”
- 7. 小程序的分享 发送给好友功能
- 8. 与你一块儿写小程序
- 9. 写给 python 程序员的 OpenGL 教程
- 10. 写给换编程语言的你
- 更多相关文章...
- • W3C 程序 - W3C 教程
- • ASP 子程序 - ASP 教程
- • 再有人问你分布式事务，把这篇扔给他
- • 算法总结-归并排序
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 送给曾经的我，也写给如今的你
- 2. 送一个竖屏给你写代码
- 3. 写给你的JavaScript
- 4. 送给你们的爱
- 5. 阿里P7高级架构师写给Java程序员的职业规划——送给还在奋斗的你
- 6. “小红书”——给你安利几个小程序的“坑”
- 7. 小程序的分享 发送给好友功能
- 8. 与你一块儿写小程序
- 9. 写给 python 程序员的 OpenGL 教程
- 10. 写给换编程语言的你