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

你的名字 2022-05-27 06:51 193阅读 0赞

# 开发前配置 #

#克隆代码仓库
    $ 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之前, 请先看懂看懂看懂微信官方的文档 点击[这里][Link 1]查看

在框架中, 针对微信的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 ####

![QQ20180212-131350_2x.png][]

可以看到, 监听了8080端口

#### 查看本机ip ####

##### macOS/Linux #####

打开终端, 运行ifconfig

![QQ20180212-131452_2x.png][]

可以看到, 本机ip为192.168.29.93

##### Windows #####

打开cmd

运行ipconfig

找到本机ip

然后将上面的地址[http://0.0.0.0:8080][http_0.0.0.0_8080] 中的0.0.0.0替换成本机地址 [http://192.168.29.93:8080][http_192.168.29.93_8080]

在微信浏览器打开即可

![20180413142245588][]

[Link 1]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
[QQ20180212-131350_2x.png]: http://dev.mp.duduapp.net/_book/assets/QQ20180212-131350@2x.png
[QQ20180212-131452_2x.png]: http://dev.mp.duduapp.net/_book/assets/QQ20180212-131452@2x.png
[http_0.0.0.0_8080]: http://0.0.0.0:8080/
[http_192.168.29.93_8080]: http://192.168.29.93:8080/
[20180413142245588]: /images/20220527/a6d201a1b52f4a01b7be39d9212835fe.png