公司近期急需上线一个支付宝小程序,和前段时间上线的H5保持一致,H5采用Vue开发,因项目周期太赶,只有一周时间,从项目立项,开发,联调,测试,上线.所有大部分代码采用复制粘贴的方式.记录一些开发过程中的酸甜苦辣.

与微信小程序差异

支付宝小程序是第一次接触,先简单介绍一些和微信小程序的差异对比

  • JS API 命名空间不同
1
wx.navigateTo => my.navigateTo
  • 绑定事件从bind改为on开头，并且采用驼峰形式
1
bindchange="event" => onChange="event"
  • if 和 for语句写法不同
1
2
3
4
5
6
wx:if => a:if
wx:for => a:for
wx:key => a:key
wx:for-item => a:for-item
wx:for-index => a:for-index
// 另外支付宝还增加了一个key属性，key 是比 a:key 更通用的写法，里面可以填充任意表达式和字符串。在 for 中使用 key 来提高性能。
  • JS API 方法名调整
1
2
3
4
5
6
7
8
9
10
11
12
13
wx.request() => my.httpRequest() // 网络请求
wx.login() => my.getAuthCode() // 用户登陆获取授权码
wx.showModal() => my.confirm() // 确认框
wx.getUserInfo() => my.getAuthUserInfo() // 获取用户信息
wx.requestPayment() => my.tradePay() // 支付
wx.saveImageToPhotosAlbum() => my.saveImage() // 保存在线图片
wx.setNavigationBarTitle() => my.setNavigationBar() //导航栏标题
wx.setNavigationBarColor() => my.setNavigationBar() //导航栏颜色
wx.getClipboardData() => my.getClipboard() //获取剪贴板数据
wx.setClipboardData() => my.setClipboard() //设置剪贴板数据
wx.scanCode() => my.scan() // 扫一扫

更多请查阅官方文档
  • 支付宝多了一个更高性能设置数据的方法 spliceData
1
2
3
this.$spliceData({
	'a.b':[1,0,4,5,6];
})

从Vue中迁移 vue => 小程序

1, HTML 替换标签

1
2
3
4
span => text
img => image
div => view // 常用的块元素都替换成view
template => block

2, CSS,因在vue中使用了scss,所以需转换成css到小程序中, 并替换对应的标签选择器,如p,ul,li改用其他的选择器

3, 模板语法替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 条件渲染
<div v-if="data == 1">  =>  <view a:if="{{data == 1}}">

//列表渲染
<div v-for="(item,index) in List">  =>  <view a:for="{{List}}">

// 数据绑定
<div :id="data">  => <view id="{{data}}">

// 事件绑定
<div @click="event">  =>  <view onTap="event">

// 路由调整
<router-link :to="{name:'other-page',query:{some-data:data}}">  =>
<navigator url="../other-page?some-data={{data}}">

4, JS 语法替换

1
2
3
4
- methods里面的方法提取到 与小程序的onLoad层级并列
- 赋值 this.someData = 1  =>  my.setData({someData: 1})
- 取值 this.someData  => this.data.someData
- mounted()  => onShow()

5, 遇到的问题

1, 经常会遇到编译后提示程序错误,请前往控制台查看,发生这种情况的原因目前遇到的有以下:

  • 标签未闭合, 闭合错误
  • 标签嵌套有误,或是模板语法中获取变量时报错.
  • 这种错误不会详细提示错误位置,只能通过大量注释代码不断缩小发生错误的范围

2, 界面显示和实际dom结构不同

  • 标签未闭合, 闭合错误
1
<image src="XXXXXXXXX" alt />  //图片标签一定要闭合,在H5中不闭合一般不会有问题
  • 涉及模板变量的不要换行,不然会引起渲染不准确
1
2
3
4
5
6
7
// vue
{{countDownStr.day}}:
{{countDownStr.hou}}:
{{countDownStr.min}}:
{{countDownStr.sec}}
// 小程序
{{countDownStr.day}}:{{countDownStr.hou}}:{{countDownStr.min}}:{{countDownStr.sec}}
  • 条件判断也不可换行处理
1
2
3
4
5
6
7
// vue
<div
    v-if="data &&
    data.a &&
    data.a.b">
// 小程序
<view a:if="{{data && data.a && data.a.b}}">
参考:

支付宝小程序开发文档

微信小程序开发文档