微信开发之细节技巧集锦

最新推荐文章于 2023-02-07 22:29:27 发布

LVXIANGAN

最新推荐文章于 2023-02-07 22:29:27 发布

阅读量550

点赞数

分类专栏：微信公众号/小程序

本文链接：https://blog.csdn.net/LVXIANGAN/article/details/79220437

版权

微信公众号/小程序专栏收录该内容

29 篇文章 4 订阅

订阅专栏

微信开发者文档已经写得很清楚很完善了，但也有一些细节没写明白，在这里班门弄斧的记录一下。持续更新中……

@）监听返回按钮事件

腾讯没有提供API监听返回事件，但可以通过以下方法：返回会触发onUnload事件，在unLoad中根据业务逻辑再处理就行了。

@）占用内存限制

微信官方允许小程序的代码发布限制在1MB以下，而实际开发过程中，图片等多媒体资源通常会占用较大空间，导致程序包大小很容易超出1MB限制。因此，开发者需要将多媒体资源剥离后上传至服务器端或云端，并修改资源的引用路径。腾讯云小程序解决方案提供瘦身功能。

与APP类似，用户在使用小程序的过程中也会持续产生不同类型的交互数据，微信官方对整个小程序大小也有着10MB的限制，意味着使用过程中的用户交互数据也只能通过服务器端或云端存储。

@）小程序开发注意事项
1.小程序有 1MB 内存限制，这就决定了 开发者的重心首先要放在产品的功能逻辑，其次才是UI；
2.绕开成熟的App，从简单、刚需、用户低频但极大的痛点入手；
3.服务类型的平台产品，一定要保证服务的质量；
4.不要只想着借用微信流量，只有好的产品体验才能获得流量的红利；
5.企业级产品应该综合微信订阅号、服务号、企业号和小程序各自的功能和特点，开发最佳产品组合。

@）console控制台输出：

for (var i =0; i <32; i++) {
console.log(1);

}

总结：微信开发工具控制台会对连续相同的内容进行折叠。

@）wxml页面的条件渲染判断：

<!--index.wxml-->
<view class="container">
  <view wx:if="{{mValue == 100}}">显示 value == 100 </view>
  <view wx:elif="{{mValue == 101}}">显示 value == 101 </view>
  <view wx:else>显示都不符合</view>
</view>

//index.js
const app = getApp();//获取应用实例
Page({
  data: {
     mValue: 98,
  },
onLoad: function () {
   var that = this;// 当前类的上下文
   setTimeout(function () {
       that.setData({mValue : 100});
   }, 3000);
 }
})

先后显示
1、显示都不符合
2、显示 value == 100
总结：与ewp不同，微信wxml文件内容会根据wx:if、wx:elseif、wx:else 条件表达式，动态监听mValue变化，进而动态显示/隐藏不同页面内容，无须手动刷新。

@）可以在任何地方设置全局变量：下方 app.js 中的 globalData 只有一个键值对，但可以在 index.js 页面创建token、haha等全局属性。

//app.js
App(
  {
  onLaunch: function () {
    // 展示本地存储能力,TODO
  },
  
  globalData: {
    mName : "lvxiangan"
  }
})


//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    mValue: 98,
  },

  onLoad: function () {
    var mToken = app.globalData.token;
    console.log(mToken); // 输出：undefined

    app.globalData.haha = "haha";
    console.log("app.globalData.haha===" + app.globalData.haha); // 输出：haha
  }
})

总结：可以在其他 js 文件创建app.globalData自定义属性，但为方便维护，建议统一在globalData里面创建。

@）使用forEach遍历数组。以下两者等价：

var arr = [1, 2, 3, 4, 5, 6, 7, 8];

arr.forEach(function(item,index){
   console.log(item);
});

arr.forEach((item,index) => {
   console.log(item); //item是数组中每一个值,index是序号
});

@）this.setData用法

微信中的this.setData，类似java的setter、getter，set的是Page页面定义的data，不同的是，微信SDK除了赋值外，还会对引用data下属变量的页面进行重新渲染，重新显示页面新数据。如Page / xxx.js 文件：

Page({
      /**
       * 页面的定义初始数据
       */
      data: {
              dataList: [],
              curIndex: 0,
              total: 0,
              result: []
            },

      test: function() {
              // 使用setData进行二次赋值，注意小括号里面要包含大括号
              this.setData({
                    curNav : 123,
               });

             },
})

注意：
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。例如：this.data.curNav = 123;虽然可以在js页面改变curNav值，但并不能重新渲染页面。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。