4628人阅读
微信小程序Mini App（105）
http://www.wxapp-union.com/article-1070-1.html
分享者：senola，GitHub地址：https://github.com/senola/webchat-app-issues早就知道小程序这个坑很深，一个多月的实践发现这个坑果然名不虚传... 不过，开发的小程序如期上线了，还是值得庆贺！！！呵呵，记录一 ...
分享者：senola，GitHub地址：
早就知道小程序这个坑很深，一个多月的实践发现这个坑果然名不虚传...
不过，开发的小程序如期上线了，还是值得庆贺！！！呵呵，记录一下那些让自己停顿的点。
一、开发微信小程序遇到的坑
1、 {{}} 不能执行方法，只能处理简单的运算如 “+ - * /”，比如遇到遍历list，每个item的金额需要格式化，只能在js里预先格式化好再setData一遍( ╯□╰ )
2、只能通过,只能通过,只能通过setData()更新视图，坑..........
3、我们规定页面路径只能是五层，请尽量避免多层级的交互方式。
4、A页面--&B页面，B页面返回A，如何触发A的刷新，不增加页面层级。 暂时想到的方案：在A页面的onshow事件里写A的初始化数据逻辑。
5、undefined 当作字符串处理 if(xxx == "undefined") 【后期版本迭代优化了】
6、遇到奇怪的问题（如样式等）先重启工具，百试不爽
7、不支持本地web字体(需要使用线上字体),经测试发现一些安卓就是不能正常显示。几经折腾才发现原来还要存放字体的服务器要支持跨域。尼玛，手机上调试也不报错，差点放弃web字体了。卡了好久，坑.............
8、本地资源无法通过 css 获取 可以使用网络图片，或者 base64，或者使用 &image/& 标签
9、不能直接操作 Page.data 【避免在直接对 Page.data 进行赋值修改，请使用 Page.setData 进行操作才能将数据同步到页面中进行渲染】
10、数字键盘用 type="digit"
11、已用 https，但报无法建立与该服务器的安全连接是什么情况【需要 nginx 配置一下 https 的加密标准为tls1.2及以上】
12、wx.setStorage(OBJECT) 【目前每个小程序限制5M】
13、数据监控【微信后台：事实访问次数/昨日概况/累计访问用户数/TOP受访页】
14、微信调试神器，ngrok，见
15、view 添加点击效果[需要开启hover效果]：
&view hover hover-class="item-hover"&
16、用户授权调试方法【开发工具-》清除手机授权数据 (缓存-清除手机授权数据) 】
17、安卓手机上小程序第一次加载时候首页时候， onshow方法会莫名其妙加载两遍，而同样在iphone下却不会，由于需要在onshow里面触发获取用户信息，所以系统加载两次onshow会导致后台报错。。。
18、禁止页面下拉： 设置 "disableScroll": true 。
19、安卓下会出现getAppConfig:fail，无法获取userInfo。微信问题，下载最新的微信安装包
20、后台不能接受POST数据，但是可以接收GET请求参数
data: data,
method: "POST",
dataType: "json",
'content-type': 'application/x-www-form-urlencoded' //==& 此处若为application/json则服务端无法获取POST的参数
21、小程序第一次启动用户拒绝授权后，下一次无法唤起授权弹框，默认记住上一次用户的选择。暂时没有找到解决方法，微信也没有相关解析。【】
22、跳转到有tabbar的页面一定要用 wx.switchTab().这个在各个群里几乎每天都有人问到！！！
22、绑定开发者/体验者时记得去手机上确认邀请。（超多人问）
23、 微信后台更新了request合法域名，可以直接去微信开发工具--&项目--&配置信息--&刷新，立马生效。
二、小程序开发前相关配置
1、登录---&管理员扫二维码--&设置--&开发设置--&生成AppSecrect
2、服务器配置 登录---&管理员扫二维码--&设置--&开发设置--&服务器域名--&扫二维码
3、绑定开发者 用户身份--&开发者--&二维码 开发者最多10人
4、绑定体验者 用户身份--&体验者--&二维码扫描 体验者20人
三、小程序发布
发布只能用管理员账号。步骤如下：
开发工具中退出开发者账号
管理员扫码登录开发者工具，上传--&微信后台设为体验版本--&审核--&发布
注意： 审核时间不定，2-6天
四、审核不通过原因收集
1、小程序简介没有介绍小程序功能
2、类目与页面提供的内容不一致
3、小程序提供的服务和内容必须是正式的，不能以测试内容提交，多次以测试内容提交
4、含有声音视频内容，请补充相关对应类目
5、首页图片与文字有互相重叠，建议优化
6、搜索框及少数下才能选中，页面评论点击无响应，页面图片分辨率尺寸失真
7、部分图片显示被压缩体检不好
8、有账号体系的小程序，除自有登录方式，必须支持微信授权登录
9、必须登录才能使用的服务，请提供测试账号
10、存在虚拟物品在线交易， ios系统需要走IAP,小程序暂不支付，请留意后续
11、小程序服务类目所对应的页面中的核心内容必须与该类目一致。
12、必须保证用户在该页面能使用该服务类目，不得隐藏，不得进行多次跳转
13、不得展示和推荐第三方小程序。示例：不能做小程序导航，不能做小程序链接互推，小程序排行榜等
14、小程序的页面内容中，存在诱导类行为，包括但不限于诱导分享、诱导添加、诱导关注公众号、诱导下载等，要求用户分享、添加、关注或下载后才可操作的程序，含有明示或暗示用户分享的文案、图片、按钮、浮层、弹窗等的小程序，通过利益诱惑诱导用户分享、传播的小程序，用夸张言语来胁迫、引诱用户分享的小程序，强制或诱导用户添加小程序的，都将会被拒绝；
15、 禁止视频、音乐、语音等多媒体的自动播放
16、 如果小程序有账户系统，必须提供能正常使用且易于发现的“退出”账户选项
17、小程序内容不能包含赌博、竞猜和抽奖的。
18、小程序的页面内容中，不能存在测试类内容；示例：算命，抽签，星座运势等。
五、文档及社区
1、封装微信发起请求接口,登录失效默认自动发起登录请求
* 发起的是 HTTPS 请求
* @pram url: 请求地址,协议必须为https
* @pram data 请求参数请求参数
* @param success 请求成功回调
* @param fail 请求失败回调
* @param complete 请求完成（成功或者失败）回调
function request(url, data, success, fail, complete) {
var _url = url,
_data = data,
_success = success,
_fail = fail,
_complete =
wx.request({
data: data,
method: "POST",
dataType: "json",
'content-type': 'application/x-www-form-urlencoded',
'Client-Agent': getSystemInfo(),
'WX-SESSION-ID': wx.getStorageSync(constant['WX-SESSION-ID']) //每次请求带上登录标志
success: function(res) {
if(res.data.code == "-9999") { //会话失效重新登录
requestLogin(function(){
constant['NUM_TRY_LOGIN'] ++;
//设置请求上限，防止重复提交并死循环
if(constant['NUM_TRY_LOGIN'] & constant['LIMIT_NUM_TRY_LOGIN']) {
request(_url, _data, _success, _fail, _complete);
if(res.data.code == "0") {
if(typeof _success == "function") {
_success(res.data);
wx.showToast({title: res.data.msg, icon: 'loading', duration: 2000});
fail: function(res) {
if(typeof _fail == "function") {
_fail(res);
if(typeof _fail == "string") { //请求失败的弹框提示
wx.showToast({title: _fail, icon: 'loading', duration: 2000});
complete: function(res) {
if(typeof _complete == "function") {
_complete(res);
2、请求登录接口
* 请求登录,获取用户相关信息
* @param callback
function requestLogin(callback) {
var _callback =
wx.login({
success: function (event) {
// 获取到请求码，继续请求用户的基本信息
if(event.code) {
var code = event.code;
wx.getUserInfo({
success: function (res) {
var data = {
code: code,
encryptedData: res.encryptedData,
iv: res.iv,
signature: res.signature,
rawData: res.rawData
var url = domain + "/wx_xxx"; //请求登录地址
request(url, data,
function(res){ //success
if(res.code == "0") {
//此处可以将服务端返回的登录状态保存起来
wx.setStorageSync(constant['WX-SESSION-ID'], res.object.sessionId);
if(typeof _callback == "function") {
_callback();
function(res){ //fail
wx.showToast({title: '请求登录失败',icon: 'loading', duration: 2000});
fail: function(res) {
//用户拒绝授权
if(res.errMsg == "getUserInfo:cancel" || res.errMsg == "getUserInfo:fail auth deny") {
wx.redirectTo({ //跳转至未授权页面
url: '../xxx-page/xxx-page'
wx.showToast({title: '微信登录失败',icon: 'loading', duration: 2000});
fail: function(res) {
wx.showToast({title: '微信登陆失败！',icon: 'loading', duration: 2000});
七、持续踩坑中...（）他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)只需一步，快速开始
后使用快捷导航没有帐号？
解决调试腾讯云微信小程序Demo错误“登录失败：调用鉴权服务失败#40029_WEIXIN_CODE_E ...
此文章解决大家遇到可恶的“登录失败：调用鉴权服务失败#40029的问题”~~
很多人出现上面的问题，那是因为：如果在购买解决方案时，把AppId 和 AppSecret 填写错误。小程序用户在登录时，便会返回错误码40029 ...
此文章解决大家遇到可恶的“登录失败：调用鉴权服务失败#40029的问题”~~
很多人出现上面的问题，那是因为：如果在购买解决方案时，把AppId 和 AppSecret 填写错误。小程序用户在登录时，便会返回错误码40029，错误信息MA_WEIXIN_CODE_ERR。此时便需要手动修改 AppId 和 AppSecret！修改步骤如下：
登录会话管理服务器，进入/opt/lampp/htdocs/mina_auth/system/db/目录，查看db.ini文件，文件中保存着 云数据库 CDB 的ip、port、username、passwd以及 dbname 等信息。1.1) 进入CDB配置文件目录cd /opt/lampp/htdocs/mina_auth/system/db/1.2) 查看服务器配置文件vi db.ini拿到这些信息以后，登录云数据库CDB，修改 cAppinfo 表中的 AppId 和 secretKey 即可。2.1)进入安装mysql命令的目录cd /opt/lampp/bin/2.2)连接CDB./mysql -h #ip -P #port -u #username -p #passwd(其中#ip、#port、#username、#passwd是在1.2步骤中查看到的具体信息)-h -P -u -p 的后面不要有空格哦！！2.3)更新AppId 和 AppSecretuse cA//选中数据库。update cAppinfo set appid = "your appid",secret = "your secret";//更新正确的AppId 和 AppSecret要有分号哦！！转自https://github.com/tencentyun/weapp-doc/blob/master/README.md#重装开发语言环境【未经作者本人同意，请勿以任何形式转载】
上一篇介绍。
这一章节介绍微信小程序的生命周期，什么是生命周期呢？
通俗的讲，生命周期就是指一个对象的生老病死。 从软件的角度来看，生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。
下面从一下三个方面介绍微信小程序的生命周期：
应用生命周期
页面生命周期
应用生命周期影响页面生命周期
》》》应用生命周期
用户首次打开小程序，触发 onLaunch（全局只触发一次）。
小程序初始化完成后，触发onShow方法，监听小程序显示。
小程序从前台进入后台，触发 onHide方法。
小程序从后台进入前台显示，触发 onShow方法。
小程序后台运行一定时间，或系统资源占用过高，会被销毁。
前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。
在整理本文资料的时候，有点不解，为什么不把小程序监听『销毁』方法开放给开发者，我猜测是因为IOS系统限制『按下Home键时，app从活动状态转入后台，会被挂起』；微信也不例外，只要运行一段时间或把微信客户端进程杀掉，就无法通知小程序应用被销毁。
》》》页面生命周期
小程序注册完成后，加载页面，触发onLoad方法。
页面载入后触发onShow方法，显示页面。
首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
当小程序后台运行或跳转到其他页面时，触发onHide方法。
当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload
》》》应用生命周期影响页面生命周期
小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。
下图是小程序从注册到页面加入，前后台切换流程。&
你也可以关注我的微信公众号『ITNotes』， 一起交流学习 。
阅读(...) 评论()在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
1、什么是瀑布流
1.1、瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，图片的宽度是固定的，高度自动。视觉表现为参差不齐的多列布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
2、h5下实现一个瀑布流的基本思路
2.1、定义基本的html结构
&div class="container"&
&div class="list"&
&img src="" alt=""&
&div class="list"&
&img src="" alt=""&
2.2、定义基本的css样式
.container{
.container{width: 100%;padding: 10px 10position:}
.list{float:width: 100padding: 10bottom: 10}
.list img{width: 100}
2.3、js动态计算加载项的样式。
function water_fall(parent_selector,box_selector){
let boxElem=document.getElementsByClassName(box_selector);
let boxWidth=boxElem[0].offsetW
let cols=2;
let height_arr=[];
for(let i=0;i&boxElem.i++){
let cur_box=boxElem[i];
let cur_box_height=cur_box.offsetH
if(i&cols){
height_arr.push(cur_box_height);
let minH = Math.min.apply(null, height_arr);
let index=height_arr.indexOf(minH);
cur_box.style.cssText+=`;position:top:${minH}left:${boxWidth*index}px`;
height_arr[index]+=cur_box_
var maxH = Math.max.apply(null, height_arr);
let parentElem=document.getElementById(parent_selector);
parentElem.style.cssText+=`;height: ${maxH}px`;
这里固定2列，通过定义一个高度数组，然后遍历区块，获取每个列表项的高度，然后push到数组，从数组中找到最短的高度所在的位置来决定后面的列表加入到哪一列，并且设置它的left和top。到此一个简单的瀑布流已经完成，上面的代码其实还可以优化。每次只需遍历新加载的数据，然后追加到父节点中。效果图如下：
或者微信打开：
3、如何在微信小程序下实现一个瀑布流。
说了这么多，其实无非是想接下来做一个对比，来看下微信小程序下怎么实现一个瀑布流。还是分3步3.1、定义基本的wxml结构
&view class="content_list"&
&view class="list "&
&image class="img_item " src="xxx"/&
&view class="list "&
&image class="img_item " src="xxx"/&
3.2、定义基本的wxss样式
.content_list{position:}
.list{width: 350min-height: 200}
.img_item{width: 100%;}
这里有个差别，就是我没有给.list这个class设置padding了，因为在微信小程序下是不能够操作节点获取样式的。后面我们将根据图片的宽度动态计算左右两边以及左边一列图片的padding。同时这里图片的单位用的是rpx。主要是为了适应不同屏幕终端。3.3、js动态计算加载项的样式。两种方案，第一种定义一个隐藏域，用于存放图片，当图片加载的时候绑定加载事件获取图片的宽高
&view style="display:none"&
wx:for="{{temImgArr}}" wx:key="id" id="{{item.id}}" binderror="onImageError" src="https:{{item.link}}" bindload="onImageLoad"&&/image&
主要js代码如下：
onImageLoad: function (e) {
let imageId = e.currentTarget.
let oImgW = e.detail.
//图片原始宽度
let oImgH = e.detail.
//图片原始高度
let imgWidth = (this.data.winWidth - 20) * 0.48;
let scale = imgWidth / oImgW;
//比例计算
let imgHeight = scale * oImgH;
let imgObj = {
id: imageId,
width: imgWidth,
height: imgHeight
for (let i = 0; i & temResImgArr. i++) {
if (temResImgArr[i].id == imageId) {
temResImgArr[i].width = imgW
temResImgArr[i].height = imgH
if (imgLen == temResImgArr.length) {//图片遍历完
this.waterFall();
onImageError: function (e) {
waterFall: function () {
for (let i = 0; i & temResImgArr. i++) {
if (heightArr.length & 2 && i & 2) {
heightArr.push(temResImgArr[i].height + 10);
let minH = Math.min.apply(null, heightArr);
let index = heightArr.indexOf(minH);
temResImgArr[i].top = `${minH}`;
temResImgArr[i].left = `${360 * index}rpx`;
heightArr[index] += (temResImgArr[i].height + 10);
let maxH = Math.max.apply(null, heightArr);
let temp = this.data.imgA
temp.push(...temResImgArr);
this.setData({
imgArr: temp,
viewHeight: maxH,
temImgArr: []
//重置数据。
temResImgArr = [];
imgLen = 0;
wx.hideToast();
但是这种方案并不是最优，需要定义2个临时数组来处理加载的图片，同时用户等待的时间太长，必须要等所有图片加载完后获取到所有的高度后才能够展示出来，体验很不好。既然花了大部分时间在获取图片宽高上面，那么为什么不能够从接口输出图片宽高呢？所以要么上传图片的时候把宽高录入db，但是这种并没有什么意义。要么就是输出的时候处理，这时想到了PHP有个getimagesize函数（PHP是世界上最好的语言有木有），可以获取到图片的宽高。这样就不用改db了。备注：这里更正下，组内大神一眼就看出输出时候用getimagesize函数处理存在性能问题，就是高并发的时候、服务器带宽很容易耗尽，不同进程之间拉取同样图片还无法利用缓存。最后还是改为将图片宽高存入后台。且看改进后的js代码：
onLoad: function () {
let self =
imgLen = 0;
heightArr = [];
wx.getSystemInfo({
success: function (res) {
let imgW = Math.floor(350 * (res.windowWidth) / 750);//图片在当前屏幕尺寸下的实际宽度
let colW = Math.floor((res.windowWidth - 2 * imgW) / 3);//左右两边边距和图片边距的宽度
self.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight,
colW: colW,
self.getImgInfo();
waterFall: function (data) {
let j = 0;
for (let i = 0; i & data. i++) {//遍历动态加载的数据
let imgW = Math.floor(350 * this.data.winWidth / 750);//获取图片在当前屏幕下的实际宽度
data[i].height = Math.floor(imgW * data[i].height / data[i].width);
if (heightArr.length & 2 && i & 2) {
heightArr.push(data[i].height + this.data.colW);//实际高度+动态边距
data[i].top = `0`;
data[i].left = i == 0 ? `${imgW * i + this.data.colW}` : `${imgW * i + 2 * this.data.colW}`;
let minH = Math.min.apply(null, heightArr);
let index = heightArr.indexOf(minH);
data[i].top = `${minH}`;
data[i].left = index == 0 ? `${imgW * index + this.data.colW}` : `${imgW * index + 2 * this.data.colW}`;
heightArr[index] += (data[i].height + this.data.colW);
let maxH = Math.max.apply(null, heightArr);
let temp = this.data.imgA
temp.push(...data);//追加到当前图片列表中
this.setData({
imgArr: temp,
viewHeight: maxH,
//重置数据。
imgLen = 0;
wx.hideToast();
实际效果如下：
这样就实现了一个微信小程序下的瀑布流。实际效果可以打开微信，扫描左边二维码，直接体验。或者微信小程序搜索拍照POSE大全。里面附很多美图，各种拍照姿势等你来完善，来补充，欢迎体验并上传自己的小姿势。PS：无双不成对，一张图太单调，请容许我再附上最近做的一款美的砍价小程序,美的认证，砍到即可购买。最近天气热，有购买家电的朋友可以扫码购买。
最后，如果你有更优的解决方案请告诉我，我们一起探讨，欢迎点评!
3 收藏&&|&&8
你可能感兴趣的文章
16 收藏，4.2k
5 收藏，4.8k
156 收藏，2.1k
请问如果每一个图片下面都有相应的介绍文本。那么怎么计算这一块的高度呢。文本高度不是固定的。
请问如果每一个图片下面都有相应的介绍文本。那么怎么计算这一块的高度呢。文本高度不是固定的。
看下这里api的介绍，我在调试工具中亲测是可以获取文本高度的。
https://mp.weixin.qq.com/debug/wxadoc/dev/api/wxml-nodes-info.html#selectorqueryselectselector
看下这里api的介绍，我在调试工具中亲测是可以获取文本高度的。
temp.push(...data);//追加到当前图片列表中这行代码是有问题的，如果数据条数很多，那您这个temp数组一直在添加，temp数组会被撑爆
temp.push(...data);//追加到当前图片列表中
这行代码是有问题的，如果数据条数很多，那您这个temp数组一直在添加，temp数组会被撑爆
谢谢指出，temp应该销毁的。已改正
谢谢指出，temp应该销毁的。已改正
这个应该如何销毁比较好
这个应该如何销毁比较好
请问下怎么给渲染图片加链接呢？
请问下怎么给渲染图片加链接呢？
楼主，第二种方案有源码吗？
楼主，第二种方案有源码吗？
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}