1.小程序开发整体布局:

整体布局:从上到下、从大到小、从左到右;
局部布局:例如「上下只要求一边间距,只设置margin-top或padding-top或margin-bottom或padding-bottom,不需要上下都设置;左右也类似,例子如协议弹窗」

2.小程序开发过程中,如果没有正式发布版的,则不能通过API生成小程序码,所以需要有发布的正式版;

1.1、小程序码生成API:wxacode.getUnlimited

1.2、小程序扫码测试:在文件 project.config.json 添加指定页面入口,并添加query的参数,如:scene=ic%3DeR2uc4%26c%3DA;

在页面onLoad方法加载后,在options参数中取得(options.scene),小程序码的扫码参数存放在scene参数里面,scene像是http链接的query参数字符串,

所以获取后需要通过decodeURIComponent方法将参数字符串转义成ic=129ad&id=12312,最后还要自己解析该字符串才能使用每一个参数。

3.因为小程序也需要适配每一个不同手机分辨率,所以有时候按钮或者元素的边框1像素不够用,可能会被挤压变成模糊,如下图:

所以这种情况就需要直接给边框设置1px,而不是1rpx,这样微信适配后真正的物理像素可能就会被忽略为0px;

4.有时在页面业务逻辑处理完后,要跳转到其他页面,出现了以下错误:

errMsg“:“navigateTo:fail can not navigateTo a tabbar page

原因是由于在底部tabbar里面定义了同样连接地址的底部导航,如果在底部导航页面定义了相同地址的bar,则此页面无法跳转。

Tab栏(顶部或底部导航栏):

在二级页面里, 如果页面处理完后要重定向回Tab页面时,不能使用wx.navigateTo跳转,应该使用wx.switchTab。

※注意点:wx.switchTab不能传递参数。

内置函数:arr.splice(index,howmany)删除数组中某个值。

5.wx:for 和 wx:if、wx:else不能在同一标签使用

错误代码:
<view class="wrap">
  <view wx:if="{{bagesList.length > 0}}" class="warp-list" wx:for="{{bagesList}}" wx:key="id">
      <view bindtap="goDetail" data-id="{{item.id}}">
        <view class="Img">
          <image src="{{item.image}}"></image>
        </view>
        <view class="desc">{{item.storeName}}</view>
        <view class="price">
          <text class="pri">¥{{item.price}}</text>
        </view>
      </view>
  </view>
  <view class="noBox" wx:else>
    <image src="../../images/bg_no01.png" mode="widthFix"></image>
  </view>
</view>

解决办法:
wx:for 和 wx:if 分成两层处理:
<view class="wrap">
  <view wx:if="{{bagesList.length > 0}}">
    <view class="warp-list" wx:for="{{bagesList}}" wx:key="id">
      <view bindtap="goDetail" data-id="{{item.id}}">
        <view class="Img">
          <image src="{{item.image}}"></image>
        </view>
        <view class="desc">{{item.storeName}}</view>
        <view class="price">
          <text class="pri">¥{{item.price}}</text>
        </view>
      </view>
    </view>
  </view>
  <view class="noBox" wx:else>
    <image src="../../images/bg_no01.png" mode="widthFix"></image>
  </view>
</view>

当标签代码解析成逻辑代码时就会出现以下的错误代码:

for(){
  if(){
  }
}
else{
}

这个是逻辑问题,循环列表比 if 优先级高,所以两个写在同一个标签上,逻辑就成了错误,而w:else不属于要解析的标签逻辑, 也就不报错了。

6.小程序input搜索框,如果使用实时动态或onblur搜索,异步请求会直接先返回一个Promise结果设置到input框导致有个对象文本:

看情况使用不同方式:①如果是全部输入完可以直接使用同步的方式,避免输入每个字符就一直请求;②使用失去焦点和触发键盘搜索键(完成)。

7.小程序变量的undefined和网页中变量的undefined不一样:

①小程序中:判断对象的属性是否被定义,直接使用「object.id」可以在if做判断,因为结果值是常量undefined;
②但在网页的JS中,不能在在if直接判断,因为「object.id」的值是字符串’undefined’,非空字符串做判断就错了。

8.小程序排版的margin和padding与网页的排版不一样:

小程序页面的margin和padding是不被包含在父级宽高度里面,网页的margin和padding是包含在父级宽高度里面的。

9.引入require和import引入文件及模板的区别:

require的引入必须是相对路径的,是个坑;

import的引入是绝对路径,对于pages。

import和require都是被模块化所使用:

调用时间
–require是运行时调用,所以require理论上可以运用在代码的任何地方
–import是编译时调用,所以必须放在文件开头

本质
–require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量
–import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require

10.变量赋值或者对象赋值的时候,尽量使用「变量值或与空字符串」的取值方式:

const param = value || ''
let param2 = obj.id || ''

※避免取值为undefined,如果是undefined可能引发不可预知的JS错误。

11.小程序中的API请求,最好添加API请求过程的状态,这样即使点击按钮或者其他触发事件不至于重复发起请求:

// 一、定义
data: {
  apiProcessing: false
}
// 二、参数校验
// 参数校验成功才设置apiProcessing为true
// 请求完后、或失败则设置为false,才能继续发送请求。

12.小程序自带组件switch的坑:

不能动态自定义小圆球的颜色,只能设置一次样式,背景色倒可以设置两次,相当于关闭和开启两个位置的样式设置。