mui+mint+vue2.x+vue-router+vuex+webpack制作的原生app项目

原创 18323947911 教程 vuejs 1265阅读 2017-12-30 23:06:07 举报

一 项目说明:

  1. 主要基于vue2.x+mui的原生单页面APP项目,经过之前gulp+mui+vue1.0项目迁移过来,借鉴了github上vue美团项目的mint ui框架,主要是利用了mint的样式,原生手机功能主要偏重于mui框架,主要是考虑到dcloud提供的mui和h5+封装对于调用手机原生能力比较好,此项目我的-我的足迹里用到了手机gps定位功能(需下载app手机查看),mui的plus对象需运行于手机端环境,pc端有可能出现报错现象;项目全部是写的h5页面利用hbuilder的云打包发行原生android包和ios包,更改原生android功能也提供了一些sdk插件,个人修改利用eclipse IDE进行本地打包,本项目没有本地打包介绍,有需要android工程文件在github上联系吧。
  2. 项目地址:点这里
  3. 线上查看:点这里
  4. APP下载地址:点这里

二 代码相关:

  1. 刚采用mui框架的时候遇到了很多坑,mui框架文档却采用简略写法,如果想少踩mui坑的话,看看这个文档(mui-vue2说明文档),打包详细流程文档有说明。
  2. 优化之前多个页面传参及数据,采用vuex便于管理,这里用到vuex控制头部和底部导航栏的显示
    html 代码

3.路由跳转后判断前进页面后退页面样式,mui默认使用窗口创建和打开mui.openWindow({})来打开页面,项目使用vue-router来控制,判断前进页面和后退页面来采用相应的过渡样式,提交状态数据
html 代码

4.通过mui的h5+功能判断手机gps状态
html 代码

5.项目没有过多涉及业务逻辑,只是构建了基本页面,主要用于h5开发原生android/ios项目需涉及许多原生支付,推送等相关业务场景,这里只是简单记录。

评论 ( 5 )
最新评论
18323947911 3F 2018-01-12 09:19:04 5F

可以下载app看看有没问题

18323947911 2F 2018-01-12 09:18:17 4F

可以下载app看看有没问题

xiongpeiji 1F 2018-01-11 11:33:05 3F

华为手机浏览器太垃圾了

18323947911 1F 2018-01-09 10:28:14 2F

华为型号?没弹出对话框吗?

951216388 2018-01-09 09:15:50 1F

在我的华为上 , 点击进入没有反应