微信小程序 wepy 框架

更新于 分类于 阅读次数：

微信小程序踩坑记
考虑到业务的复杂性需要 redux 状态管理，以及原有 vue 项目的可移植性，选用 wepy 来开发小程序

1. 相关资料

网上有很多现成的资料，可以直接参考，本文不再赘述
由于官方文档不够详尽，后文列举一些文档中没有的常见功能及排坑

小程序文档
wepy github
wepy 文档
wepy 特性介绍
wepy-redux
redux 入门
weui
Promise
async/await
小程序部分坑
微信小程序开发之webview组件内网页实现微信原生支付
微信小程序与内嵌网页交互实现支付功能

todo
await 错误捕获
小程序 webview 交互

2. 快速开始

  • 安装 node 最新稳定版
  • npm install wepy-cli -g
  • wepy init standard myproject 创建标准项目
  • cd myproject 进入项目目录
  • wepy upgrade 更新依赖
  • npm install 安装依赖
  • wepy build -w 实时编译
  • 运行微信开发者工具，并且设置：
    不勾选 “ES6 转 ES5”
    不勾选 “上传代码自动样式补全”
    不勾选 “代码上传时自动压缩”
    勾选 “不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书”

2.1 引入 weui

使用 wepy 创建 weui 项目模板

1
wepy init wepyjs/wepy-wechat-demo myproject

将 style 文件夹拷贝到自己的项目，然后在 app.wpy 的 style 标签里添加

1
@import './style/weui.less';

如需部分引入，修改 weui.less 注释掉不需要的组件即可

2.2 引入第三方组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <toast />
</template>
<script>
import wepy from 'wepy'
import Toast from 'wepy-com-toast'

export default class Index extends wepy.page {
  components = {
    toast: Toast
  }
  methods = {
    go() {
      let promise = this.$invoke('toast', 'show', {
        title: '自定义标题',
        img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/star.png'
      })

      promise.then((d) => {
        console.log('toast done')
      })
    }
  }
}
</script>

3. wepy 语法

3.1 组件通讯

组件命名 驼峰式 childCom

3.1.1 父子组件通讯 props 方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// parent.wpy
<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>

data = {
    parentTitle: 'p-title'
};

// child.wpy

props = {
    // 静态传值
    title: String,

    // 父向子单向动态传值
    syncTitle: {
        type: String,
        default: 'null'
    },

    // 父子 props 双向绑定
    twoWayTitle: {
        type: Number,
        default: 'nothing',
        twoWay: true
    }
};

父组件在变更传递给子组件 props 后要执行 this.$apply() 方法才能更新

注意要写成成对的 <child></child>

3.1.2 父子组件通讯 事件传递方式

父组件可以使用 invoke 来给特定的子组件发事件，这个组件必须在此模块里注册过

1
this.$invoke('com','myevent','myparam')

注意目前wepy 1.7.0版本，和官方文档不同的是，event 里的事件不能被 invoke 触发
（但可以被 emit boardcast 触发），所以需要类似 onLoad 的写法，直接写在 class 里。

wepy中的methods仅可用于页面事件绑定，其他自定义方法都要放在外层

3.2 页面交互

页面间可以用 url 的 qruey 参数的方式来传参
onLoad 事件里有 options 参数，是包含当前页面路径的 query

1
2
3
4
5
6
7
8
9
10
// source page
wepy.navigateTo({
  url: 'test?a=123&b=456'
})

// target page
onLoad(options) {
   console.log(options.a) // 123
   console.log(options.b) // 456
}

注意，注册在 app.wpy 的 tabBar 里的目标页面，只能用 switchTab 来跳转

1
2
3
wepy.switchTab({
  url: 'test?a=123&b=456'
})

web-view 页面可以通过调用微信 jssdk 的 wx.miniProgram.xxx 系列方法，来控制跳转到小程序页面，同样可以传 query 参数

3.3 wepy 请求

可以直接按原生小程序的语法
或者按官方文档的方式 使用Promise的 then 方式回调，还需要配置
wepy项目中使用async await

1
wepy.request(url).then((d) => console.log(d))

二者混合

1
2
3
4
5
6
wepy.request({
  url: url,
  data: {},
  method: 'GET' // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  // header: {}, // 设置请求的 header
}).then(d => console.log(d))

使用 async/await 方式

3.4 async/await 错误捕获

使用 try…catch 语法

1
2
3
4
5
6
7
8
9
10
boom (s) {
  return Promise.reject(new Error('promise rejected'))
}
async onLaunch() {
  try {
    await this.boom()
  } catch (err) {
    console.log('CATCH', err)
  }
}

4. css

4.1 css 预编译语言

默认为 less，还可以使用 css、sass、scss、stylus
只需要 npm 安装对应包，并且在 style 标签声明，例如

1
npm install wepy-compiler-sass --save-dev
1
2
<style lang="scss">
</style>

注意 wepy 和普通引用不同的是，scss 的 function 以及 $ 变量，必须在使用它的文件 style 中引入
全局样式中声明是无效的，可以写成单独的 scss 文件，通过 import 引入。

另外 style 的样式会影响到子组件，可以类似 vue 使用 scope 关键字来去除影响

用到多种编译语言时，可以出现多个不同的 style 标签。

1
2
3
4
5
6
7
8
9
<sytle lang="scss" scoped>

</style>
<sytle lang="scss">
  @import '../style/common.scss';
</style>
<style lang="less">

</style>

最后请注意，wepy css 编译报错后，需要重启微信开发者工具。

5. webview

todo 需要验证

5.1 在内嵌页里判断当前是否是小程序

1
2
3
window.wx.ready(function () {
    isWxMini = window.__wxjs_environment === 'miniprogram'
})

未完待续

图片来源：https://www.pixiv.net/member_illust.php?mode=medium&illust_id=59474391