- 电脑需要支持 nodejs、npm 环境如果没有安装,请自行百度进行安装;
- npm 安装依赖有可能比较慢,建议安装 cnpm 命令,可以加速首次运行下载以及安装依赖库的速度(自行百度安装);
- h5的运行,你需要有一个域名,以及有一个空间可以存放静态html页面;
- 你需要一个微信服务号,因为本项目登陆需要服务号的网页授权登陆;
- 业务域名,添加后,用户打开你的h5网站,微信不会提示一些信任信息(例如密码输入框微信会提示防骗信息~);
- JS接口安全域名 域名,必须配置你的域名,配置以后,才可以使用 js-sdk 的功能,比如调用相机摄像头、微信支付、分享转发等等;
- 网页授权域名 ,这个必须配置,如果不配置,无法完成微信网页授权一键登录;
- “api工厂” 右上角注册开通自己的后台账号;
- 克隆本项目的测试数据方便测试以及立马查看效果;
左侧菜单的工厂设置,点击 “数据克隆” ,选择 “将别人的数据克隆给我”,商户号请填写 25771 ,点击立即克隆完成克隆
; - 左侧菜单的微信设置里,公众号设置,请正确填写你的服务号的 appid 和 secret 信息;
- 下载最新的前端代码后解压;
- 安装依赖
如果你有安装 cnpm,可以将上面的命令换成下面的命令会快非常多:
npm install
cnpm install
- 修改根目录下面的2个配置文件
分别是本地开发环境配置文件/正式发布的配置文件
.env.development .env.production
VUE_APP_SUB_DOMAIN
改为你自己的专属域名,VUE_APP_SUB_DOMAIN
改为你的h5的网页标题,VUE_APP_BAIDU_MAP_KEY
建议取百度地图开放平台免费申请一个自己的 key ,不要用公用的测试key,会有使用频次限制 - 本地运行命令
npm run serve
- 编译打包部署服务器
编译完成以后,将根目录下面
npm run build
dist
文件夹下的静态html页面部署到你的空间即可; - 访问观看效果 现在请在微信中访问你的域名,即可观看效果