微信小程序开发过程中遇见的问题

最新推荐文章于 2022-06-10 09:51:36 发布

♂♀放纸鸢

最新推荐文章于 2022-06-10 09:51:36 发布

阅读量1.3k

点赞数

分类专栏： web移动开发

本文链接：https://blog.csdn.net/qq407949480/article/details/82796742

版权

web移动开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、改变传统前端开发思想，而是MVVM思想，双向数据绑定很重要，不再是操作dom。

2、怎样在小程序页面中打出空格（ ）或者换行(<br/>)等需要在<text decode="{{true}}">哈 哈</text>中，否则不起作用

3、一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息。直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致；单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

4、小程序生命周期执行顺序，先onload ，然后到 onshow，最后 onready，但是这不能作为网络请求wx.request的顺序，因为很多情况下，可能onready中网络请求数据加载完成了，但是onload还没返回数据，这就是回调函数蛋疼的地方，曾经有个四级级联，每个下拉框都是根据上级的id获取下级的列表，就会出现多层嵌套，想用promise then解决，但是没想明白，暂时留坑。

5、编写.wxs文件时注意，里面很多原生js函数不能用或者写法不一样，比如setTimeout和setTimeInterval都没有，其余没有深入研究过。

6、小程序API，建议多看，有很多实用的功能都给封装好了，比如上拉刷新或下拉加载更多

7、在编写wxss样式时，本地图片在预览中无法显示，只能用网络图片或者转换成base64的

8、公共模块 util.js。公共模块方法需要通过 module.exports 对外暴露接口，使用的时候需要利用 require(path)，将文件引入。

如：

function sayHello(name) {//公共方法util类
  console.log(`Hello ${name} !`)
}
module.exports.sayHello = sayHello//用module.exports 对外暴露接口

//先引入文件，是新建的一个 utils 包，公共方法在 util.js 里面

var util = require('../../utils/util.js')
Page({//调用类
  onLoad: function () {
    util.sayHello('sayHello');//  使用时，用 util 引用名调用，如：util.sayHello()
  }
})

9、出现警告信息“ Now you can provide attr "wx:key" for a "wx:for" to improve performance”的问题

首先，这只是一个警告信息，不是错误信息，不理他不会对程序运行有任何的影响。官方文档原话：如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。如果你一定想去掉这个警告，可以在wx：for的组件属性里增加一个 wx:key="unique"，unique请替换成数据绑定列表里的任意一个字段的字段名，比如订单列表数据中的字段“postId”，即wx:key="OrderId"。不建议使用wx:key="*this"。其实wx：key用来对列表渲染的数据指定一个"主键”，以加快列表渲染的速度。

10、小程序如何快速创建页面文件。在app.json文件下pages数组里，添加一个页面的路径，如果这个路径指向的是一个不存在的文件，那么小程序开发工具会自动创建这个页面的四个文件。

11、用操作改变数组或者数据来代替页面跳转刷新。举个简单的例子，我们操作订单的时候，在“待付款列表”下，点击“立即付款”，如果付款成功，我们可以把这条数据从“待付款列表”数据中删除，实现该页面的局部刷新。

12、用e.currentTarget.id 或者 e.currentTarget.dataset.index来定位该条数据在数据列表中的位置，

11、js数值精度问题，js无法精确的获取后台传送long类型的数据，需要后台转换成字符传类型。

12、wx.request中的header头不要乱写，否则，可能会出现postman中请求成功，而小程序报一堆乱七八糟的错误

13、mode = multiSelector需要多研究

14、用options获取当前地址栏参数，可以获取多个。如下图，可以用options.status获取订单状态

15、在app.js中创建封装请求数据的方法wx.request，这个方法不止一次用到，当然该封装的不止这一个，自己可以根据需要封装。

16、js数组函数一定要熟练掌握。concat()、forEach()、join()、keys()、map()、pop() 、push()等等

17、获取form表单初始值提交数据。

<!--textarea.wxml-->部分
<form bindsubmit="formSubmit">
    <view class='site-cell'>
        <view class="cell">
            <text>收货人：</text>
            <input class='cell-in' name="realname" value="{{consignee}}" maxlength='30' bindinput='getConsignee'/>
        </view>
        <view class="cell">
            <text>手机号：</text>
            <input class='cell-in' name="mobile" value="{{phone}}" type="number" maxlength='11' bindinput='getPhone'/>
        </view>
    </view>


//textarea.js
  formSubmit: function(e) {
     console.log(e.detail.value.realname)
     console.log(e.detail.value.mobile)
  }