开发微信小程序详细总结

蔚落 2022-05-23 04:49 537阅读 0赞

## 1、微信小程序之rpx ##

在微信官方的文档中，我们看到这样一句话：

在 iPhone 6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。开发微信小程序时设计师可以用 iPhone 6 作为视觉稿的标准。也就是说，设计师在设计小程序时，可以这样做：

*  直接以 iPhone 6 的屏幕尺寸（375×667）用作视觉稿尺寸，1 px = 0.5 rpx；
 *  以 1 px = 1 rpx 的标准，将设计稿尺寸设定为 750×1334。

其实总的来说就是，你跟UI小姐姐说一声，然后就可以很爽的写样式了。

## 2、微信小程序之容器视图 ##

*  view 其实就是div，嘿嘿嘿就是这么简单粗暴的解释。
 *  scroll-view 可滚动视图区域。 这个需要注意的是，横向滚动的视图区域。重要的是这两个行内样式，其他的官方文档也说的比较清楚。

## 3、微信小程序之UI框架 ##

这个，很有意思，当我写完一个我觉得很有灵性的选项卡的时候，以前哥们告我微信小程序有个框架你看看去。。。

![1][]

不BB，直接上地址 [github.com/Tencent/weu…][github.com_Tencent_weu]

![1 1][]

先写到这里，周六加班的午休时间，冒着被同时打死的危险写的，如果有什么写的不好的地方，请大家多多包涵，我也还会分享我遇到的问题。

最近又看到有赞的微信小程序UI还是老规矩直接上地址：

[youzan/zanui-weapp][youzan_zanui-weapp]

## 4、微信小程序之switchTab ##

页面跳转大家官网上看的navigator用法你套着用就可以了，今天分享一下我在小程序中遇到的页面跳转的问题。我写的是一个电商商城小程序，跳转到详情页之后有两个点击跳转的icon如图：

![1 2][]

聪明的你肯定猜出来这两个icon是跳转到哪的，肯定也是bindtap，然后wx.navigator就搞定了。两个简单的页面跳转嘛，然后居然就是这两个问题卡了我一个多小时，后来还是在微信群里问大佬们才解决的，因为自己看文档不仔细，跳转的这两个页面是微信官方底部tab的路径如图：

![1 3][]

问题是出在官方的tabbar中你用了这几个路径如图：

![1 4][]

然后解决方法为:

handleGoIndex: function() \{  
wx.switchTab(\{  
url: '/pages/index/index'  
\})  
\},  
handleGoCart: function() \{  
wx.switchTab(\{  
url: '/pages/cart/index'  
\})  
\}

## 5、微信小程序之禁止页面下拉 ##

有的时候你会遇到不让页面下拉，如果你以为我说的是下拉刷新的api的话那就图样了。就是不让你下滑的时候出来那个白条。直接上代码了：

<view catchtouchmove="stopDrag" class="container">  
stopDrag()\{  
return false;  
\},

但是这个慎用，我也想在这里如果有大神能指点指点就最好了，这个的效果是可视区域全部静止滑动... 拼多多的小程序首页就是不会出现那个下拉的白条，但能上滑看商品信息，求教～

![1 5][]

最新解决方法，在app。json 里面增加一条这个属性，就可以禁止滚动。

## 6、微信小程序之页面深度 ##

在测试自己的项目的时候，发现明明逻辑没问题，语法也没问题。突然想起来小程序的页面栈是五个，于是特别中二的数了一下自己的页面跳转哈哈... 才发现当时自己的理解是错误的，刚开始不细心看文档，我以为这五个页面是超过五个会把新的加进页面栈，第一个打开的销毁。我就无脑用wx.navigateTo，遇到这个问题后用了 wx.redirectTo就解决了。但是谁让我好学呢，于是发现一个大神写的特别完美的理解小程序页面跳转的原理。

（现在深度，变成了10层，但是在ios 10的部分系统下，还是有bug的，还是要考虑页面深度这种场景的。）

依然是嘿嘿:[小程序基础篇之页面路由-微信小程序俱乐部 www.wxappclub.com][-_ www.wxappclub.com]。

## 7、微信小程序之上拉加载 ##

我现在公司的项目做的是电商的小程序，下拉刷新，官网写的很明确不能与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的状态来延时请求接口。实现效果如下图：

![1 6][]

![1 7][]

这就是我用上拉加载的实践，希望有大神能提出更好的建议。

## 8、微信小程序之数据交互 ##

说到这里顺便把我的一些关于数据交互的一些经验分享一下

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)
            }
        })
    }  把微信请求封装起来
    还有项目里面要用到的接口如下

![1 8][]

把接口暴露出去在其他页面调用

![1 9][]

![1 10][]

希望有大神能帮忙一下小程序的组件化最佳实践~

## 9、微信小程序之Android请求失败的坑 ##

我当时遇到的情况是，在模拟器和IOS环境下请求数据都是没有任何问题的，在测试android环境时发现请求失败如下图

![1 11][]

这个错还让我跟运维的大哥撕了半天哈哈， 首先出现这个错，兄弟这个锅完完全全就能甩给运维的大哥，不留任何余地。 然后可以帮大哥提供一写资料，一步步排查，先查你项目绑定域名：

1、https证书问题 ：ssl证书配置需要使用pem,不使用crt, ，

2、服务器端的版本信息：TLS版本的问题，该问题在微信小程序官方文档中已经提及到，服务器TLS版本必须支持 1.2 （启用1.2，禁用1.1和1.0等低版本），

3、前两种方法是在查阅资料有人说是可解决的，但是对于我们公司最后在排查前两项之后，运维大哥用Nginx转发了之后，解决了安卓请求失败的问题。希望可以帮到大家吧~

## 10、微信小程序之地址页面三级联动 ##

说道这个问题，现给大家贴一个地址，非常感谢大神的开源：[blog.csdn.net/sinat\_17775…][blog.csdn.net_sinat_17775]

大家可以看到代码之后，先理清你要处理的后端数据和存地址的要求等等，我遇到的问题是

![1 12][]

后端给我的数据里面有每一个地址对应的ID，比如北京：2 北京：50 东城区：500

处理这个数据的时候，我根据原来大神的代码做了一些修改，

![1 13][]

布局方面需要做一些修改的地方就是

![1 14][]

![1 15][]

我贴了这么多图，是因为我真不会说了，调这个页面调了两天。只能提供个大概方向，还是得一步步处理数据，goodluck~

## 11、微信小程序之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;哈哈哈

## 12、微信小程序之Ios环境下mp4播放问题 ##

当你遇到你的mp4格式有的能播放，有的不能播放的话，你只需要看一下你的mp4编码格式，必须是h264格式才行。

## 13、微信小程序之微信支付的坑 ##

这个因为我也是第一次写小程序嘛，后端的大哥，在H5的商城里什么都实现了一次了，非说各种没问题，只贴两个图就明白了第一个

![1 16][]

这个api里面的所有数据都是后端返给你的，不要接受他的甩锅哈哈。

还有就是一定要让后端好好看微信支付的文档，一般公司开发商城都是服务商版的支付服务，这里就是我和后端大哥的甩锅之路，他没有绑定我得小程序appid，然后各种说调不通。。。

![1 17][]

去这里配置好，前端只需要调API传值就好

## 14、微信小程序之图片上传 ##

好久没更新了，被公司业务搞得焦头烂额。

老规矩，直接上代码了。

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
              }
            })
        }
    这个是多个图片上传的方法，单个图片上传的话，把循环去掉就好。主要是因为微信官方默认的就是一次上传一张图片这个很蛋疼。只能这么搞了。。。

## 15、微信小程序之电商购物车逻辑 ##

接着再给大家分享一个关于小程序购物车全选的逻辑处理，这个还是要感谢我的老妹教导我，一个开发人员做东西一定要严谨，不管UI设计的有多丑，该有的逻辑你一定要做到。

![1 18][]

首先我们要做到的就是，当用户点击第三个商品时 全选按钮自动选中，或者全选之后，只要有一个商品不选中，全选按钮也得变动。先给大家看一下代码：

你要在页面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，再赋值。

经过这几步操作之后就解决了全选这方面的所有逻辑，觉得有用的小伙伴，记得评论，关注哟～

## 16、微信小程序之使用Map对象 ##

这是我的梁master跟我提的这件事，我是小程序，她是Android，项目一样。我俩关系好，然后她教我的用的这个Map对象，其实这个是java的map对象。用起来真的很爽，不废话了直接上代码。

![1 19][]

这样就实现了，对选项卡的优化，如果接口数据变多了的话，会重新赋值。 虽然是自己给自己加戏，但这是也是我的一种工作态度，学习了新东西，还让优化了项目。

## 17、小程序之全局变量缓存的问题 ##

这个问题的出现是因为，在input的事件，我没有找到更好的能监听键盘收回的方法，也是为了更好的用户体验吧，所以随之而来的问题就是全局变量，在赋值之后用户退出这个页面，全局变量被微信缓存了，然后造成，用户输入过一次之后，修改手机号失败的bug。

![1 20][]

## 18、小程序之微信支付的深坑 ##

事情是这样的，因为公司主体变更，避税之类的事。我们公司的小程序，需要重新换绑微信支付，在财务给我们申请号商户号之后，我们排期半夜来切环境。 我记得是一个周四的晚上，十二点开始切环境，然后 大概后端代码数据库都准备好之后，我们重新绑定微信支付，以为大功告成。周五还能弹性一上午美滋滋～

没想到 刚交个测试，说微信支付不能用，提示我们没有授权。wtf，刚绑定好的你这样提示，不合适吧。按照报错一查，我去小程序 社区里一看。

你敢信，微信开放平台的商户号和公众号商户号，是两回事。 小程序之支持公众号的商户号，但是你在开放平台绑定小程序微信支付的时候，官方给你的提示是 绑定成功～。

然后 就变成了 早上七点下班。。。

血的教训呀！！！

## 19、小程序之登陆改版 ##

https://juejin.im/post/5b0e9c6351882515887ed760

作者：Jiyr  
链接：https://juejin.im/post/5b0ccd4e51882515861d2347  
来源：掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[1]: https://user-gold-cdn.xitu.io/2018/5/29/163aa029d0ae7fa5?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[github.com_Tencent_weu]: https://link.juejin.im?target=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttps%253A%2F%2Fgithub.com%2FTencent%2Fweui-wxss
[1 1]: https://user-gold-cdn.xitu.io/2018/5/29/163aa029d0b22756?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[youzan_zanui-weapp]: https://link.juejin.im?target=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttps%253A%2F%2Fgithub.com%2Fyouzan%2Fzanui-weapp
[1 2]: https://user-gold-cdn.xitu.io/2018/5/29/163aa029d0ca5f47?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 3]: https://user-gold-cdn.xitu.io/2018/5/29/163aa029d0eb9f9e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 4]: https://user-gold-cdn.xitu.io/2018/5/29/163aa029d0e258d1?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 5]: https://user-gold-cdn.xitu.io/2018/5/29/163aa029eb0cfe09?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[-_ www.wxappclub.com]: https://link.juejin.im?target=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttp%253A%2F%2Fwww.wxappclub.com%2Ftopic%2F596
[1 6]: https://user-gold-cdn.xitu.io/2018/5/29/163aa029ed35b112?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 7]: https://user-gold-cdn.xitu.io/2018/5/29/163aa029f2d7f4e8?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 8]: https://user-gold-cdn.xitu.io/2018/5/29/163aa029f634fd62?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 9]: https://user-gold-cdn.xitu.io/2018/5/29/163aa029fd54632f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 10]: https://user-gold-cdn.xitu.io/2018/5/29/163aa02a044519ed?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 11]: https://user-gold-cdn.xitu.io/2018/5/29/163aa02a07a2247e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[blog.csdn.net_sinat_17775]: https://link.juejin.im?target=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttp%253A%2F%2Fblog.csdn.net%2Fsinat_17775997%2Farticle%2Fdetails%2F54573560
[1 12]: https://user-gold-cdn.xitu.io/2018/5/29/163aa02a0f83cf57?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 13]: https://user-gold-cdn.xitu.io/2018/5/29/163aa02a1a8db5ac?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 14]: https://user-gold-cdn.xitu.io/2018/5/29/163aa02a1d718773?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 15]: https://user-gold-cdn.xitu.io/2018/5/29/163aa02a1de1d81b?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 16]: https://user-gold-cdn.xitu.io/2018/5/29/163aa02a213acdf2?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 17]: https://user-gold-cdn.xitu.io/2018/5/29/163aa02a345baf55?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 18]: https://user-gold-cdn.xitu.io/2018/5/29/163aa02a3b1fbc66?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 19]: https://user-gold-cdn.xitu.io/2018/5/29/163aa02a3f1b5a82?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 20]: https://user-gold-cdn.xitu.io/2018/5/29/163aa02a4129c561?imageView2/0/w/1280/h/960/format/webp/ignore-error/1