目录
持续更新中,学到一点写一点😔
- 项目结构
- H5与app的区别
- 项目框架搭建
- 使用iconfont图标库
- 连接真机调试
- 打包apk发布
- 使用mint ui 组件
- 使用vant ui 组件
- 调用h5 + api
- Axios请求封装
- 偷师学艺:浏览器访问手机端网页并审查元素
4
项目结构
vuex学习
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
https://vuex.vuejs/zh/guide/
npm install vuex --save
项目的适配
因为移动端设备屏幕大小,屏幕比例什么的差别比较大,所以移动端项目的适配问题就显得尤为重要,这里我们主要使用flexible.js进行适配,
引入flexible.js,在main.js里引入flexible.js文件,可将flexible.js作为静态文件放在最外层static文件夹里引入,如下图
1、window.location.href=URL : 在本窗体打开一个新的页面,也是最常用的一种方法;
2、window.open(URL) : 在一个新的窗口打开一个新的页面;
3、location.replace(URL) :本窗口的页面被替换为一个新的页面URL,替换后不可以回退到上个页面;
4、localtion.assign(URL) :本窗口的页面转为为一个新的页面URL,与上一方法类似,但此方法可回退至上一页面。
执行过程:当用户点击 router-link 标签时,会去寻找它的 to 属性, 它的 to 属性和 js
中配置的路径{ path: ‘/home’, component: Home} path 一一对应,从而找到了匹配的组件, 最后把组件渲染到
标签所在的地方。
vue.config.js配置文件
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。
H5与app的区别:
H5就是移动端的web,手机的浏览器,所以vue开发的app是基于h5的基于手机浏览器的,虽然后面打包成app,但实际是运行在手机提供的浏览器上的。
原生app是用java写的,android studio写的。
vue编译成h5 ,h5打包成app,app运行在手机浏览器上。
使用iconfont图标库
SVG
可缩放矢量图形(Scalable Vector Graphics)使你能够使用一组矢量与形状来描述图片,在显示时可提供无关大小的零失真的平滑缩放。
调用h5接口,使用手机功能。
https://blog.csdn/qianlixiaomage/article/details/104622151
1.安装库
cnpm i vue-awesome-mui -S
如果没有cnpm那就npm吧!
2、引入Mui
main.js中引入
import Mui from ‘vue-awesome-mui’;
Vue.config.productionTip = false
Vue.use(Mui);
在new Vue中添加上Mui,
3、完成1、2、就可以在后面的vue文件中直接引用plus了。
注意:
plus只能在手机上使用,所以浏览器run dev没有使用。连接手机调试才能看到效果
使用vant ui组件
mint ui 实在太难用,开发者文档也没有演示的结果。决定用vant ui。
npm install vant -S
import Vant from ‘vant’
import ‘vant/lib/index.css’
Vue.use(Vant)
记得导入css。
van滑动单元格踩坑
官方文档中,<template #right>,不行,要改成slot=“right”
<van-swipe-cell right-width="65">
<van-card
num=""
price="更新至xxx"
desc="简介:七城战乱,邪神复苏的阴影笼罩在赤色大陆上空,家族争斗,对抗怪物,阶级跨越,人类一切的阴谋与仇恨,皆指向永夜传说,指向人与时间的诅咒。"
title="小说名"
class="goods-card"
thumb="https://img01.yzcdn/vant/cat.jpeg"
@click="reading"
/>
<template slot="right">
<van-button square text="删除" type="danger" class="delete-button" />
<!-- <van-button square type="primary" text="收藏" /> -->
</template>
</van-swipe-cell>
偷师学艺:浏览器访问手机端网页并审查元素
电脑浏览器怎么访问网页的手机端呢?
打开开发者工具,elements旁边有两个小手机框框,就可以切换成H5端.
Hbuilderx创建5+app项目
指向编译出来的dist
连接真机调试
打包,直接把dist下面的所有文件,复制到5+app项目下,运行/打包即可。
真机调试:菜单-运行-运行到手机/模拟器-xxx手机
打包apk发布
选择发行=》原生App云打包=>然后选择打android的包,有ios的证书也可以打包为ios,android可以用免费的公用证书,开发者直接使用即可,具体选择如下,然后接下来等待即可。稍微等待之后,打包成功之后,会返回apk下载文件的下载链接,点击链接,把apk文件下载下来,然后发送到自己的android手机,安装在自己的手机上即可。
更多推荐
vue开发移动端app-学习记录
发布评论