H5与app的区别项目框架搭建使用图标库连接真机调试

菏泽炫佑科技

H5与app的区别项目框架搭建使用图标库连接真机调试

目录

不断更新，学点东西，写点东西

项目结构 H5 与 app 的区别 项目框架搭建使用图标库连接真机进行调试打包apk发布使用mint ui组件和vant ui组件调用h5+请求封装。 学习相同的技术：浏览器访问移动网页并检查元素

项目结构

Vuex学习

每个 Vuex 应用程序的核心是商店。 “存储”基本上是一个包含应用程序中大部分状态的容器。 您无法直接更改商店中的状态。 更改存储中状态的唯一方法是显式 () 它。

npm vuex --保存

项目适配

由于移动设备的屏幕尺寸和屏幕比例差异较大，移动项目的适配问题就显得尤为重要。 这里我们主要使用.js进行适配。

引入.js。 在main.js中引入.js文件。 可以将.js作为静态文件导入到*外层文件夹中，如下图

页脚标签。 -link导航标签。跳转keep-alive是Vue的内置组件。 当它包装动态组件时，它会缓存非活动组件实例而不是销毁它们。

1. ..href=URL：以这种形式打开一个新页面，这也是*常用的方法；

2. .open(URL)：在新窗口中打开新页面；

3. .(URL)：该窗口中的页面将替换为新的页面 URL。 更换后，无法返回上一页；

4..(URL)：将本窗口中的页面转换为新的页面URL，与上一个方法类似，但此方法可以返回到上一个页面。

执行过程：当用户点击-link标签时，会查找其to属性，其to属性和js

{path: '/home', :Home}path中配置的路径一一对应，从而找到匹配的组件，*终将组件渲染到

标签所在的位置。

vue..js 配置文件

vue..js 是一个可选的配置文件。 如果该文件存在于项目根目录下（与.json同级），则会被@vue/cli-自动加载。 你也可以使用.json中的vue字段，但是需要注意的是，这种写法需要你严格遵循JSON格式。

H5和app的区别：

H5是移动Web和移动浏览器，因此Vue开发的应用程序是基于H5和移动浏览器的。 虽然后来被打包成app，但实际上是运行在手机提供的浏览器上。

本机应用程序是用 java 编写的。

vue编译成h5，h5打包成app，app运行在手机浏览器上。

使用图标库

静止无功发生器

可缩放矢量图形 ( ) 使您能够使用一组矢量和形状来描述图像，无论显示时的大小如何，这些矢量和形状都可以提供零失真的平滑缩放。

调用h5接口，使用手机功能。

1.安装库

cnpm i vue--mui -S

如果没有cnpm，那就使用npm！

2.介绍穆伊

在main.js中引入

Mui 来自 'vue--mui'；

Vue..=假

Vue.use(Mui);

在新的Vue中添加Mui，

3、完成1和2后，就可以在后续的vue文件中直接引用plus了。

注意：

plus只能在手机上使用app开发，所以不使用浏览器run dev。连接手机调试即可看到效果

使用 vant ui 组件

mint ui太难用了H5与app的区别项目框架搭建使用图标库连接真机调试，开发者文档也没有演示结果。 决定使用vant ui。

npm vant -S

凡特 来自“凡特”

'vant/lib/index.css'

Vue.use(Vant)

记得导入css。

厢式滑动细胞捕集器

官方文档中没有，需要改为slot="right"

 <van-swipe-cell right-width="65">
        <van-card
          num=""
          price="更新至xxx"
          desc="简介:七城战乱，邪神复苏的阴影笼罩在赤色大陆上空，家族争斗，对抗怪物，阶级跨越，人类一切的阴谋与仇恨，皆指向永夜传说，指向人与时间的诅咒。"
          title="小说名"
          class="goods-card"
          thumb="https://img01.yzcdn.cn/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>

跟老师学习：浏览器访问移动网页并检查元素

如何从电脑浏览器访问手机版网页？

打开开发者工具。 如果旁边有两个小手机框，可以切换到H5一侧。

创建 5 个以上应用程序项目

指向编译后的dist

连接真机进行调试

打包时，直接将dist下的所有文件复制到5+app项目中，然后run/。

真机调试：菜单-运行-运行到手机/模拟器-xxx手机

打包apk发布

选择 => App Cloud => 然后选择包。 iOS 的证书也可以打包为 iOS。 您可以使用免费的公共证书。 开发者可以直接使用它们。 具体选择如下，然后等待。 。 等待一段时间，打包成功后，会返回apk下载文件的下载链接。 点击链接下载apk文件，然后发送到您的手机上并安装到您的手机上。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等