使用vue.js制作一个手机项目

本文档主要介绍使用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基座

点击分享按钮


分享调用成功

先写到这里,之后再逐步补充

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天收到微信公众号的原创标识邀请了,还是有点小激动的 这表示一年多来的坚持,受到了肯定 微信是作为个人公众号来运营...
    木秀于林阅读 412评论 0 0
  • 水晕漪澜细,山青泼墨浓。 涧鸣天地外,秋色有无中。 林浪风前动,云暝雨后空。 迷津何处问,秀野少人踪。
    泓颖阅读 243评论 28 4
  • 需求 日常有些需求,就是有圆角的控件,不太想弄太多的drawable,就自定义一个textview。需要啥背景,画...
    有点健忘阅读 643评论 0 0
  • 今天下午本来是休息的。但朋友邀请我去做她的嘉宾,没办法自己累的要死,还要去当群众演员。下午两点到达指定地点。...
    特立独行猫一只阅读 330评论 1 1
  • 每个人都有喜欢的艺人,我也不例外。我最喜欢的艺人是jessica---郑秀妍。 郑秀妍(Jessica Ju...
    冰山素颜阅读 322评论 0 3