本文档主要介绍使用vue.js的制作App应用,调用手机分享,在HBuilder下运行调试打包
1.使用代码生成一个vue.js的web空项目
(1)使用代码生成一个vue.js的项目 vue init webpack vueAppDemo
执行以下命令运行项目
cd vueAppDemo
npm install
npm run dev
2.使用H5+调用手机分享
(1).使用HBuilder打开项目,进入src-->components-->HelloWorld.vue
编码:
3.将项目转化成app项目
(1).将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './'
(2).在终端中运行 npm run build
(3).运行成功后在HBuilder 项目管理器中,查看项目目录,会多一个dist的文件夹
(4).在HBuilder工具栏中,选择文件->打开目录 选择dist的路径,并且给项目名称命名
(5).右键选择新生成的项目,将web项目转化成app项目
(6).转化之后可以看到项目图标及目录结构发生变化
转化前
转化后
(7).新增的manifest.json文件为app项目的配置文件
在manifest.json文件中配置分享设置
进入sdk配置模块,勾选需要的分享对象,填写申请到的ID和秘钥
4.在手机上运行调试
(1).使用数据线连接手机
(2).在HBuilder的工具栏中选择运行-->真机运行-->HBuilder基座运行
(3).选择需要运行的项目
(4).运行成功后,控制台输出
5.手机运行
手机点击运行HBuilder基座
点击分享按钮
分享调用成功
先写到这里,之后再逐步补充