整理H5插件开发中的问题（前端）

开发前配置

#克隆代码仓库
$ git clone https://git...........................git
# 新建一个分支
$ git checkout -b new_app

与后端对接

为了调用后端接口, 需要修改config/app_config.js配置文件

'use strict'

module.exports = {
  'deploy': {
    // 重点, 代码发布的token, 需要向后台索要, 如果不配置, 发布不了代码
    'token': 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
  },
  ...
  // 重点. 需要向后台索要api地址, 如果不配置, 调用不了api接口
  'api': 'http://aaaaaaa',

下一步

经过以上配置, 现在已经可以正式开发了, 了解更多开发过程的问题, 请看下面的文章

如何请求接口

在框架中, 已经封装好了接口请求方法, 直接调用即可

假如后台有一个获取商品列表的接口 goods 请求方式为get

  const {data} = await this.api.get('goods')
  console.log(data)

就可以了

api对象包含4个方法 get , post, put, delete

如何使用微信JSSDK

插件发布后, 是需要运行在微信浏览器的

那么不可避免的要使用到微信的JS-SDK

在使用JS-SDK之前, 请先看懂看懂看懂微信官方的文档 点击这里查看

在框架中, 针对微信的JS-SDK进行了封装, 方便在本地浏览器进行调试

下面是一个使用微信图片上传的案例

// 选图
try {
  const {localIds} = await this.wechat.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['camera'],
  })

  const {serverId} = await this.wechat.uploadImage({
    devServerId: 'dev_songzhongji',
    localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
    isShowProgressTips: 1 // 默认为1，显示进度提示
  })

  // 提交
  try {
    // 调用后台提供的接口将serverId上传
    const {data} = await this.api.get('upload', {server_id: serverId})
    if (data.error) {
      this.error = data.message
      return
    }
    // 执行下面逻辑
    const id = data.id

  } catch (err) {
    this.error = '上传图片失败啦, 请重试'
  }

} catch (err) {
  alert(err)
}

设置分享内容

this.wechat.setShare({ title: xxx刚刚进行了油腻值测试, 颜值逆出天际!, desc: '她说,你一定是油腻的中年老阿姨, 不服来战!', imgUrl: Window.AppConfig.wx.share.imgUrl, path: '/pk?id='+Window.AppConfig.user.id, });

如何进行数据统计

在应用发布过程中, 后台需要知道应用的pv, uv, 参与度, 分享度等数据

收据收集则由前端进行

在框架中, 封装了相应的方法

你应该在合适的地方调用它, 进行数据收集

统计参与度

参与度数据, 应当在用户参见应用的时候进行收集

// 在油腻值测试应用中, 用户上传了照片,参与了油腻值测试

// 调用本方法进行数据收集
this.collector.go();

打包发布

应用开发完毕, 就可以进入发布阶段了

通过打包命令打包

npm run build

将打包的代码发布到测试服务器

npm run deploy

在微信浏览器打开本地连接

前提

电脑和手机连上同一个wifi

运行npm run dev

可以看到, 监听了8080端口

查看本机ip

macOS/Linux

打开终端, 运行ifconfig

可以看到, 本机ip为192.168.29.93

Windows

打开cmd

运行ipconfig

找到本机ip

然后将上面的地址http://0.0.0.0:8080 中的0.0.0.0替换成本机地址 http://192.168.29.93:8080

在微信浏览器打开即可