移动APP开发使用

一、移动App开发步骤

安装HBuilder

​ 地址:https://www.dcloud.io/hbuilderx.html

​ 标准版:可直接用于 web 开发、markdown、字处理场景。做 App 仍需 要安装插件

  • App 开发板:在标准版的基础之上预置了 App/uni-app 开发所需的插件,开箱即用

    如果是开发 App 建议下载安装 App 开发版即可。

创建项目

参加项目的步骤

​ 1,选择参加项目中的 5 + App(A)

​ 2,还有项目的存储目录设置,和项目的名字

​ 3,项目的模板暂时可以选择默认的模板

项目目录的结构说明

​ 1,css`:存储项目中的样式文件资源

​ 2,img:存储项目中的图片文件资源

​ 3,js:存储项目中的 js 文件资源

​ 4,unpackage`:存储不需要打包的文件资源

​ 5,index.html:项目首页

​ 6,manifest.json:打包 App 的配置文件

真机调试

​ 也就是把页面运行到手机去调试预览

Android手机

​ 常见的问题:

​ 1,HBuilderX真机运行、手机运行、真机联调常见问题:

​ https://ask.dcloud.net.cn/article/97

​ 2,建议下载安装 360 手机助手,如果 360 手机助手能够连接到手 机,基本就 OK 了

​ 步骤:

​ 1,在手机的设置中打开开发者选项开启

​ 2,启用开发者选项和USB调试

​ 3,使用数据线连接手机和电脑

​ 4,然后再HBuilder软件中的,运行菜单中选择,运行到 手机或者模拟器,在里面可以找到自己的手机。

​ 5,运行到设备之后,Hbuilder 中会自动打开一个控制台 并输出运行日志

​ 6,然后 Hbuilder 需要安装调试基座(应用)到手机中, 这个时候手机会提示你是否允许安装该应用,选择允 许即可

​ 7,调试基座安装好以后,Hbuilder 会自动打开并将项目 运行到这个 App 中。

IOS手机

​ 1,下载安装 iTunes

​ 2,使用数据线连接到电脑

​ 3,确保 iTunes 能够正常连接到手机

​ 4,在 Hbuilder软件 中选择运行到你的 iPhone 设备

​ 5,它会在手机中安装一个用于调试的测试 App:Hbuilder

​ 6,在手机上设置 Hbuilder 为受信任的开发者

访问HTML + API

​ 1,可以通过js来调用手机中的各种API

​ 2,HTML + API:文档地址

打包发布

​ 1,配置 manifest.json 文件,选择补充自己需要的功能配置

​ 2,在 HBuilder软件 中找到:发行中的原生APP(云打包)

​ 3,等待一段时间,得到打包结果安装包,然后安装到手机上测试,安装 包的安装地址会出现在控制台上

​ 4,最后根据需要发布到对应的手机应用商店

​ 说明:项目中的文件都被打包到应用安装包中了,只要安装了这个应用 就不需要请求下载这些文件,除非是一些请求接口的功能必须是 联网的。这种方式好处是一些核心文件不需要联网下载,但是更 新麻烦,如果你修改了代码,则需要重新打包。

​ 还有一种方式,我们把应用部署为网站,然后在这个壳儿里面加载我们 的应用的那个网址。

​ 如果是开发测试,则将 manifest.json 文件中的 lanuchpath 修改 为你的局域网地址。

​ 如果是发布部署,则将 luanchpath 设置为线上的地址

使用Vue.js开发HTML5 + APP

​ 1,在vue中先启动服务器,将服务器中的本机地址配置到manifest.json文件中的lanuchpath中

​ 2,然后在软件中运行到手机中去

打包发布

​ 1,将 app/manifest.json 中的 launch_path 改为线上地址

​ 2,在 HBuilder 中加载项(创建)目中的 app 目录,目录中只要有 一个manifest.json文件即可,里面配置启动服务器中的本机地址, 然后在软件中选择,菜单栏 → 发行 →原生 App云打包

​ 3,配置打包规则,等待打包结果

​ 4,根据需要发行到手机的应用商店供用户下载(安卓安装包可以直接放 到自己的服务器供用户下载)

缓存问题

​ 1,手机 App 中的网页可能会有缓存问题,解决办法就是:结合前端 + 后端禁用缓存。

​ 2,参考地址:https://ask.dcloud.net.cn/question/31327

关于部署

/**
  • 配置文档:https://cli.vuejs.org/zh/config/
    */

module.exports = {
/**

  • / 用于部署在 HTTP 服务中

  • 如果是混合应用,则将其设置为相对路径 ./

  • 参考文档:https://cli.vuejs.org/zh/config/#publicpath
    */
    publicPath: “./”,

     devServer: {
       // host: '和手机在一个网段的网卡地址'
     }
    

    };

发布了7 篇原创文章 · 获赞 0 · 访问量 64

猜你喜欢

转载自blog.csdn.net/weixin_45545454/article/details/104514987
今日推荐