小程序跳转H5步骤

因为项目当中用到了video,微信小程序播放视频需要网络传播许可之类的证书 ,没有这类证书 小程序审核不通过。所以改为H5来做。

准备:

1.安装 node ,下载地址: https://nodejs.org/

2.安装 yarn, npm install yarn -g

3.安装 nrm, 管理公共 npm install nrm -g

4.增加私有库, nrm add pm http://172.16.9.19:7001/

5.切换到私有库, nrm use pm

6.运行 yarn create panshi


一.新建个文件夹,命令行输入yarn create panshi下载项目目录下的文件,

选择最后一个 smallappCli ,除了.git剩下全部复制到给的空的H5链接地址的目录

二.小程序这边的跳转传参(token == site3-f-ue)

三.小程序这边要有对应的webView页面来打开H5

四.打开H5项目,找到splash.vue页面,小程序跳转过来在这里收到参数。

得到的参数要解密,复制个base64.js到H5项目中来解密,获得的数据传到登录接口成功后跳转到相应的业务页面。

五.默认去掉标题栏

六.serverUrl(测试预发和正式环境)

接口用到传过来的serverUrl地址

页面 当中用到的图片地址需要换下( yesSrc: `https://zjsj-test-open.pinming.org/lib/front/image/helpCenter/yesbg.svg`,)

七.测试环境会走 代理,相应的要设置下

八.因为涉及用到 打开文档,所以这里标记下,文档的打开 需要 https链接(),如果涉及不到可忽略。

九.post 传参return Vue.prototype.$u.post(`${ROUTE}/project/schedule/list`, {}, Vue.prototype.$u.h5Header)

  get  传参 return  Vue.prototype.$u.get(`${SERVER}/getMenuList`, data)

十.测试打包是否成功:npm run build

十一.提供给运维 helpcenter_front.zip

十二.properties默认忽略,打包不通过,需要校验下生产环境不引用 需要放在最后面

十三.运维发布好之后 给到我们 help-center-h5 拼上之后就可以成功跳转了

我的这个项目的大概就是这样,各个公司项目可能不同,仅供参考,在此记录下。

你可能感兴趣的:(小程序跳转H5步骤)