小程序和H5结合的整个开发流程

小程序：survey-uniapp

H5：linkkap-diagnosis-h5

1. 代码克隆和运行

在云效上克隆代码，没有权限找欧阳丹开权限

两个项目的代码仓库地址如下：

git@codeup.aliyun.com:5f009f6e6a575d7f23661045/linkkap/linkkap-diagnosis-h5.git

git@codeup.aliyun.com:5f009f6e6a575d7f23661045/questionnaire/frontend/survey-uniapp.git

在所在文件夹，运行终端，输入命令克隆代码，命令：git clone 代码仓库地址。

在vscode打开项目文件，首先查看READMD.md文件，浏览大概的文件目录结构。
安装包管理器npm. 命令：npm install或者npm i

查看代码仓库的分支命令：git branch。切换分支命令：git checkout 分支名。

小程序是基于uniapp框架，在vscode环境运行，运行命令为npm run dev:mp-weixin，在package.json文件可看到所有的脚本命令。dev字符代表开发环境，mp-weiixn代表为微信平台，最后会打包一个dev的文件夹，所在目录是dist\dev\mp-weixin。

在微信开发者工具运行，新建小程序项目，填写项目名称、目录为上图打包的mp-weixin文件夹导入，AppID找负责人拿，确认即可创建小程序。可以实现在vscode编写代码，可以在微信开发者工具实时编译同步开发。

AppID：wxf04d381e67efdd3f

H5是基于vue框架，是一个多页面应用。在vscode打开上面克隆下来的文件夹。新建终端运行命令，新建终端的快捷键：ctrl+shift+、,关闭终端：ctrl+J。安装包管理器npm和查看切换git分支与上面的操作一致。
在package.json文件查看运行的脚本命令，开发环境运行命令npm run dev。

2.H5页面的创建

因为这个H5页面是多页面应用，所以创建页面相比单页面应用不一样，创建页面步骤如下：

在src/html文件夹下创建一个html文件，incentiveReport.html。
在script/entry文件夹下创建一个 incentiveReport 文件夹，里面有index.js和index.json。
在script/view 文件夹下创建一个 incentiveReport 文件夹里面放incentiveRepor.vue文件，实际页面代码。
创建好后再启动项目：命令：npm run dev

单页面应用，可以上网查如何创建页面。

3.小程序中嵌入H5页面

在这次的项目中，实现在小程序和H5的跳转和交互。

survey-uniapp：

在小程序中嵌入H5页面，需要使用到一个web-view的组件，用来承载网页的容器，会自动铺满整个小程序页面。在微信官方文档可以查到。

<template>
  <div>
    <web-view :src="reportUrl" />
  </div>
</template>

主要是实现小程序跳转到H5，要配置跳转的网页链接src。

this.reportUrl = `${process.env.VUE_APP_H5_DOMAIN}/${path}/index.html?${paramsStr}`

小程序获取H5页面传来的参数：web-view组件中的bindmessage属性是向H5向小程序传值。

H5中：
wx.miniProgram.postMessage({
  //这里一定要将数据放在dada中
  data: {
    message: msg
  }
});
//H5向小程序传值的方法会在特定的时间触发，因此需要我们手动写一个跳转（也可以写后退和摧毁，分享，以需求而定）
wx.miniProgram.redirectTo({
  url: '../pay/wxpay' //这里是小程序页面
})

小程序中：
wxml
<web-view src="{{link}}" bindmessage="handlePostMessage"></web-view>

wxjs
Page({
  data: {
    url: 'url: 'https://www.baidu.com' //这里是H5的地址
  }，
  onLoad: function (options) {},
  // 接收 h5 页面传递过来的参数
  handlePostMessage: function (e) {
    let resObj = e.detail.data[e.detail.data.length - 1];
//多次传递会是数组的形式，传递一次会push进数组，所以我们需要拿到最新的数据，也就是数组的最后一个子集
    console.log(resObj.message)
  }
})

小程序之间的页面传参：生命周期onLoad(args)函数可以获取到页面间传过来的参数args。

linkkap-diagnosis-h5：

从H5跳转到小程序，要引入微信的js接口文件，使用微信的Api。web-viewopen in new window网页中可使用JSSDK 1.3.2open in new window提供的接口返回小程序页面

// <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })

返回小程序页面的接口有wx.miniProgram.navigateTo、wx.miniProgram.redirectTo等。

wx.miniProgram.navigateTo({url: `/pages/report/pay?money=${this.paymentInfo.price}&desc=${this.paymentInfo.reportFullName}&code=${this.paymentInfo.code}`})

H5页面获取小程序传来的参数：

const getUrlQuery = (name) => {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  var r = window.location.search.substr(1).match(reg)
  if (r == null) return ''
  const res = decodeURIComponent(r[2])
  if (res === 'undefined' || res === 'null') return ''
  return res
}

// this.appId = getUrlQuery('appId')

4.小程序的调试、预览和改bug

页面调试：

在pages.json文件添加相应页面的路径。
添加编译模式，填写对应的路径和所需要的参数

在console面板，查看报错原因。

或者是根据开发环境下方的页面路径，快速定位找到该页面出现的bug

预览和真机调试：

可以预览在不同平台上样式是否有差异和测试小程序，找到bug所在位置。在真机上，如果想要查看 console API 输出的日志内容和额外的调试信息，需要在点击屏幕右上角的按钮打开的菜单里选择「打开调试」。此时小程序退出，重新打开后右下角会出现一个 vConsole 按钮。点击 vConsole 按钮可以打开日志面板。

5.小程序的打包和上传（开发环境和生产环境）

小程序的体验版和正式版本

开发环境：(体验版)

在VScode运行命令：npm run dev:bulid:mp-weixin。最后在打包的文件夹dist里面有dev的文件夹。

在微信开发者工具打开上图中mp-weixin文件夹。点击上传，提示窗口中输入版本号和说明即可

上传完毕后，登录微信公众号后台，点击左侧菜单的版本管理，把刚上传的版本选为体验版本即可。

生产环境：（正式版本-提交代码审核）

在vscode运行命令：prod:build:mp-weixi，最后打包一个bulid的文件夹

在微信开发者工具打开上图的mp-weixin文件夹。点击上传即可。
上传完毕后，登录微信公众号后台，点击左侧菜单的版本管理，把刚上传的版本提交审核，
按提示填写相关资料即可。

6.代码的更新和提交

每天上班前要更新代码，每天下班前要提交代码
代码更新命令：git pull
提交代码步骤：最后的命令: git push

git stash和git stash pop：git stash 可用来暂存当前正在进行的工作，比如想pull 最新代码，又不想加新commit，或者另外一种情况，为了fix 一个紧急的bug, 先stash, 使返回到自己上一个commit, 改完bug之后再stash pop, 继续原来的工作。

# 小程序和H5结合的整个开发流程

# 1. 代码克隆和运行

# 2.H5页面的创建

# 3.小程序中嵌入H5页面

# survey-uniapp：

# linkkap-diagnosis-h5：

# 4.小程序的调试、预览和改bug

# 页面调试：

# 预览和真机调试：

# 5.小程序的打包和上传（开发环境和生产环境）

# 开发环境：(体验版)

# 生产环境：（正式版本-提交代码审核）

# 6.代码的更新和提交