微信小程序原生开发的使用指南
事件
默认事件在 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 name="empty">
<view style="text-align:center;">
<image
style="margin-top:{{ mt0 ? '0' : '180rpx'}};width: 200rpx;height:200rpx;"
src="/common/images/no-content.png"
></image>
<view style="margin-top: 20rpx;font-size: 24rpx; color: #B4B4B4;">{{text ? text : '无内容'}}</view>
</view>
</template>
template 传入变量必须 xxx.js 的 data 上定义变量
data: {
nomoreTxt: {text: '还没有粉丝哦~'},
}
在 wxml 引用 template
<import src="../../../template/empty.wxml" />
<template data="{{...nomoreTxt}}" is="empty"></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，小程序上传的时候会自动编译
动态控制多类状态
<view class="{{}} {{}} {{}}">hello world</view>
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 内，
<image>在自动设置比例的时候有一个属性 overflow 一直被设置成 hidden，图片元素在超出了它的布局后都被隐藏了 -
解决： 将所有
<swiper-item>中<image>的属性 overflow 设置为 show
<swiper display-multiple-items="3" previous-margin="6px" next-margin="6px" class="jy-swiper">
<block wx:for="{{list}}" wx:for-index="i" wx:key="i" wx:for-item="item">
<swiper-item class="swiper-item">
<image
current="{{current}}"
bindtap="handleImg"
data-src="{{item.url}}"
src="{{item.url}}"
mode="aspectFill"
class="img"
style="overflow:show"
></image>
</swiper-item>
</block>
</swiper>
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"] . "<br />";
}
else
{
echo "Upload: " . $_FILES["file"]["name"] . "<br />";
echo "Type: " . $_FILES["file"]["type"] . "<br />";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
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 上差异
详情请查看原文-微信小程序原生开发的使用指南
