微信小程序原生开发的使用指南

事件

默认事件在 touchstart 时触发

若要实现 用户交互事件 与 系统默认事件 同步，只需要监听 touchstart 即可

阻止默认事件使用 catch 句柄

• 禁止默认事件：catchtouchstart
• 禁止触摸滑动 ：catchtouchmove

路由跳转

A -> B -> C , C 直接返回 A

A -> B 通过 wx.navigateTo 跳转

B -> C 通过 wx.redirectTo 跳转.跳转触发后 B 页面就会被销毁， C 页面再返回 wx.navigateBack 就会直接到 A 了

A -> B -> C , 返回效果 C -> B -> A

正常 A -> B -> C 都是通过 wx.navigateTo 跳转的，所以 wx.navigateBack 只能返回上一界面

template 使用

定义 template

template 传入变量必须 xxx.js 的 data 上定义变量

data: {
  nomoreTxt: {text: '还没有粉丝哦~'},
}

在 wxml 引用 template

数据 Data

改变视图的唯一方式

the.setData({ xxx: this.data.xxx });
the.setData({ xxx: yyy });

this.setData 是一个函数，setData 之后执行 callback 必须使用 回调

the.setData({ xxx: yyy }, callback);

css

加载样式 .wxss

.wxss 不支持 background 加载图片

编写 css 不需要写 prefix，小程序上传的时候会自动编译

动态控制多类状态

hello world
style="margin-top:{{ mt0 ? '0' : '180rpx'}};"

网络请求

在小程序请求中，request header 默认 'Content-Type': 'application/json'，适用于 get 请求，

而 post请求 需要改为："Content-Type": "application/x-www-form-urlencoded"

不知道为何有时候 post 请求不行的情况下直接修改大小写就搞定'content-type'

组件

组件默认样式

button 边框、背景

button::after {
  border: none;
}
buttom {
  background: transparent;
}

Swiper 组件

current 属性问题

当使用 Swiper 绑定 bindchange 时，current 改变时会触发 change 事件

因此当在 tab 点击菜单和 Swiper 组件 共同配合 来 切换页面时，

不需要分别在 tab 和 Swiper 上 执行相同代码，

只需要在 tab 上维护一个 currentIndex，然后所有业务逻辑在 Swiper 上执行，如：

export default {
  // 导航栏事件
  handleTab(e) {
    const currIndex = e.target.dataset.index + '';
    if (!currIndex) return;
    this.setData({
      tabIndex: currIndex,
    });
  },
  handleSwiperChange(e) {
    const currIndex = e.detail.current + '';
    if (!currIndex) return;
    this.setData({
      tabIndex: currIndex,
    });
    this.switchTab(currIndex);
    this.initTabLine();
    this.initParam();
  },
};

在 swiper 中使用 image 组件出现的偶尔无法显示图片的问题

• 分析：在 swiper 内， 在自动设置比例的时候有一个属性 overflow 一直被设置成 hidden，图片元素在超出了它的布局后都被隐藏了

• 解决： 将所有中的属性 overflow 设置为 show

API 接口

wx.uploadFile

这里的 name 要对应服务器 File 文件的属性名字, 如：

wx.uploadFile({
  url: 'https://cdnapp.tanwan.com/tan_wan_app_upload.php',
  filePath: file,
  name: 'file',
  formData: param,
  success: (res) => resolve(res),
  fail: (err) => reject(err),
});

if ($_FILES["file"]["error"] > 0)
  {
  echo "Error: " . $_FILES["file"]["error"] . "
";
  }
else
  {
  echo "Upload: " . $_FILES["file"]["name"] . "
";
  echo "Type: " . $_FILES["file"]["type"] . "
";
  echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb
";
  echo "Stored in: " . $_FILES["file"]["tmp_name"];
  }

wx.chooseImage

• 可用于获取图片所在路径来获得文件流 File
• 可配合 wx.request 来设置 responseType，获取 arrayBuffer，使用 wx.arrayBufferToBase64 来获取 base64

export default{
  chooseImage({count: 9}).then(res => {
    const { tempFiles, tempFilePaths } = res
    wx.request({
      url: tempFilePaths[0],
      method: 'GET',
      responseType: 'arraybuffer',
      success: function (res) {
        const base64 = 'data:image/jpg;base64,' + wx.arrayBufferToBase64(res.data);
        console.log(base64)
        uploadImage({ base64: base64 })

      }
    })
  })
}

wx.showModal

若需要换行则添加 \r\n，在小程序 IDE 无效果，真机换行

实战 FAQS

兼容性问题

• Page.onPullDownRefresh() 和 Page.onReachBottom() 不能 与 scroll-view 组件的上下拉共存，只能取其一

API 默认值在 ios 与 android 上差异

详情请查看原文-微信小程序原生开发的使用指南

相关文献

• 原文-微信小程序原生开发的使用指南
• 原文-微信小程序 mpvue 框架的使用指南
• 微信小程序文档