德州建设公司网站,wordpress如何设置注册用户名大于4个字符,北京多媒体展厅设计制作,阳江网页设计1、产生背景----跨平台应用框架
在移动端各大App盛行的时代#xff0c;App之间的竞争也更加激烈#xff0c;他们执着于让一个应用可以做多个事情 所以就应运而生了小程序#xff0c;微信小程序、支付宝小程序、抖音小程序等等基于App本身的内嵌类程序。
但是各大App他不可…1、产生背景----跨平台应用框架
在移动端各大App盛行的时代App之间的竞争也更加激烈他们执着于让一个应用可以做多个事情 所以就应运而生了小程序微信小程序、支付宝小程序、抖音小程序等等基于App本身的内嵌类程序。
但是各大App他不可能是一样的框架所以就意味着各大App下的小程序也是不一样的。
对于开发人员而言就意味着一个功能我不仅要写出一套app代码还要写出在各个APP上内嵌进去的n套不一样的代码这是非常耗时耗力且一定程度上很鸡肋的事情
在这种情况下跨平台应用框架就出现了。 现在市面上比较有名生态相对成熟的就是uniapp、React-native、以及Taro
需要注意的是uniapp是基于vue框架的react-native是基于react框架的但taro他是基于node的所以要用taro请先检查node环境为最新
各大跨平台框架官方 uniapp官网https://uniapp.dcloud.net.cn/ react-native官网https://www.reactnative.cn/docs/getting-started taro官网https://taro-docs.jd.com/docs/
2、前置使用条件
uniapp官网上对于uniapp的解释很全面也很具体 我个人认为uniapp是用着vue的语法微信小程序的标签。 这就意味着 要使用uniapp最少是需要知道vue是怎么玩转的小程序可能相对好一点不用那么严格但是最起码的一些基础还是要知道的。
3、环境安装
需要安装 官方指定idea—HBuilderX
3.1 方法一下载安装
下载HBuilderXhttps://www.dcloud.io/hbuilderx.html
3.2 方法二命令安装
这个方法的前提是你有vue-cli的环境没有的话建议直接走方法一。
不过命令行的话就直接创建了。 他是通过vue-cli指令指向到HBuilderX的创建项目那边。
4、创建项目
4.1 idea使用创建项目
在点击工具栏里的文件 - 新建 - 项目快捷键CtrlN
下面就会出现这个面板
选择uniapp类型是uniapp还是Wap2App亦或是5App或IDE插件2的位置输入你的项目名称选好你项目文件在电脑中的位置选择模板uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例还有一个重要模板是 uni ui项目模板日常开发推荐使用该模板已内置大量常用组件。根据自己的需要来决定是否启用uniCloud云端或者git点击创建 一个你需要的uniapp项目即创建完成左下7是在已经有现成项目需要接手去修改时 的云端引入。
4.2 命令行创建项目
第一步 创建项目命令行
使用正式版对应HBuilderX最新正式版:
vue create -p dcloudio/uni-preset-vue my-project使用alpha版对应HBuilderX最新alpha版:
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project使用Vue3/Vite版: 创建以 javascript 开发的工程如命令行创建失败请直接访问 gitee 下载模板
npx degit dcloudio/uni-preset-vue#vite my-vue3-projectnpx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project创建以 typescript 开发的工程如命令行创建失败请直接访问 gitee 下载模板
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project第二步 创建项目命令行之后选择模板 此时会提示选择项目模板使用Vue3/Vite版不会提示目前只支持创建默认模板初次体验建议选择 hello uni-app 项目模板如下所示 官方给的一些 注意
Vue3/Vite版要求 node 版本^14.18.0 || 16.0.0如果使用 HBuilderX3.6.7以下版本运行 Vue3/Vite 创建的最新的 cli 工程需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径注意需要重启 HBuilderX 才可以生效 HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置-运行配置-node路径 HBuilderX Windows 版本菜单栏 工具-设置-运行配置-node路径
5、启动项目/运行项目
5.1 idea启动/运行项目 浏览器运行进入hello-uniapp项目点击工具栏的运行 - 运行到浏览器 - 选择浏览器即可体验 uni-app 的 web 版。 这里做个提醒HBuilderX有内置的浏览器也可以直接运行到内置浏览器界面如图示 运行App到手机或模拟器使用电压足够的usb端口连接手机设置中开启USB调试手机上允许电脑设备调试手机进入hello-uniapp项目点击工具栏的运行 - 运行App到手机或模拟器即可在该设备里面体验uni-app。 如手机或模拟器无法识别请点击常见故障排查指南。【这是官方给出的】 如需运行在苹果手机真机上注意需使用自定义基座。 在微信开发者工具里运行进入hello-uniapp项目点击工具栏的运行 - 运行到小程序模拟器 - 微信开发者工具即可在微信开发者工具里面体验uni-app。
注意如果是第一次使用需要先配置小程序ide的相关路径才能运行成功。如下图需在输入框输入微信开发者工具的安装路径。 注意微信开发者工具需要开启服务端口 在微信工具的设置-安全中。 在支付宝、百度、抖音、QQ、快应用分联盟和华为、快手、飞书、360、京东等小程序开发工具里运行内容同上不再重复。 Tips 如果是第一次使用需要配置开发工具的相关路径。点击工具栏的运行 - 运行到小程序模拟器 - 运行设置配置相应小程序开发者工具的路径。 微信小程序工具需要配置允许权限不然HBuilder无法调用微信小程序开发工具的命令行 支付宝/百度/抖音/360小程序工具不支持直接指定项目启动并运行。因此开发工具启动后请将 HBuilderX 控制台中提示的项目路径在相应小程序开发者工具中打开。 如果自动启动小程序开发工具失败请手动启动小程序开发工具并将 HBuilderX 控制台提示的项目路径打开项目。 运行的快捷键是CtrlR。 5.2 命令行启动/运行项目
npm run dev:%PLATFORM%6、发布项目
6.1 idea发布
6.1.1 打包发布为原生App
在HBuilderX工具栏点击发行选择原生app-云端打包如下图 出现如下界面点击打包即可。 云端打包支持安心打包保护用户隐私不会上传代码和证书通过差量包制作方式实现安心打包。详见https://ask.dcloud.net.cn/article/37979 云打包也支持cli模式通过HBuilderX的cli方式不是uni-app的cli可以调用命令行打包方便持续集成。详见https://hx.dcloud.net.cn/cli/pack 虽然安心打包已经满足需求但如仍然希望自己使用 xcode 或 Android studio 进行离线打包则在 HBuilderX 发行菜单里找到本地打包菜单生成离线打包资源然后参考离线打包文档操作https://nativesupport.dcloud.net.cn/AppDocs/README。 App打包时注意如果涉及三方sdk需进行申请并在manifest.json里配置否则相关功能无法使用。 iOS App打包需要向Apple申请证书。 6.1.2 发布为Web网站
在 manifest.json 的可视化界面进行如下配置发行在网站根目录可不配置应用基本路径此时发行网站路径是 www.xxx.com/h5如https://hellouniapp.dcloud.net.cn。 在HBuilderX工具栏点击发行选择网站-H5手机版如下图点击即可生成 H5 的相关资源文件保存于 unpackage 目录。
注意: history 模式发行需要后台配置支持详见history 模式的后端配置 打包后推荐使用前端网页托管服务一键上传自带CDN加速无需购买虚拟机无需安装nginx等 若使用传统服务器部署建议在服务器端开启 gzip 压缩。参考网上的分享https://juejin.im/post/5af003286fb9a07aac24611b 6.1.3 发布为小程序
1发布为微信小程序 申请微信小程序AppID参考微信教程。 在HBuilderX中顶部菜单依次点击 “发行” “小程序-微信”输入小程序名称和appid点击发行即可 如果手动发行则点击发行按钮后会在项目的目录 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。 在微信小程序开发者工具中导入生成的微信小程序项目测试项目代码运行正常后点击“上传”按钮之后按照 “提交审核” “发布” 小程序标准流程逐步操作即可详细查看微信官方教程。 如果在发行界面勾选了自动上传微信平台则无需再打开微信工具手动操作将直接上传到微信服务器提交审核。
2发布为百度小程序 入驻小程序并申请百度小程序AppID参考百度小程序教程。 在HBuilderX中顶部菜单依次点击 “发行” “小程序-百度”输入小程序名称和appid点击发行即可在 /unpackage/dist/build/mp-baidu 生成百度小程序项目代码。 在百度小程序开发者工具中导入生成的百度小程序项目测试项目代码运行正常后点击“上传”按钮上传代码之后在百度小程序的 管理中心 选择创建的应用点击前往发布选择对应的版本然后提交审核。
3发布为支付宝小程序
入驻支付宝小程序参考支付宝小程序教程。在HBuilderX中顶部菜单依次点击 “发行” “小程序-支付宝”即可在 /unpackage/dist/build/mp-alipay 生成支付宝小程序项目代码。 在支付宝小程序开发者工具中导入生成的支付宝小程序项目测试项目代码运行正常后点击“上传”按钮上传代码在 支付宝小程序后台选择刚提交的版本点击提交审核详见支付宝小程序文档。
4发布为抖音小程序 入驻抖音小程序参考抖音小程序教程。 在HBuilderX中顶部菜单依次点击 “发行” “小程序-抖音”即可在 /unpackage/dist/build/mp-toutiao 生成抖音小程序项目代码。 在抖音小程序开发者工具中导入生成的抖音小程序项目测试项目代码运行正常后点击“上传”按钮上传代码在 抖音小程序后台选择刚提交的版本点击提交审核详见抖音小程序文档。
5发布为360小程序
入驻360小程序参考360小程序教程。在HBuilderX中顶部菜单依次点击 “发行” “小程序-360”即可在 /unpackage/dist/build/mp-360 生成360小程序项目代码。 在360浏览器中导入生成的360小程序项目 目前仅windows平台支持。360浏览器自身不支持mac平台。 6发布为快应用
入驻快应用(webview)参考快应用(webview)教程。在HBuilderX中顶部菜单依次点击 “发行” “快应用联盟”即可在 /unpackage/dist/build/quickapp-webview 生成快应用(webview)项目代码。 在快应用联盟工具中导入生成的快应用联盟项目测试项目代码运行正常后点击”构建“打包正式版在快应用联盟后台上传
7发布为快应用(webview) - 华为
入驻华为快应用参考华为快应用教程。在HBuilderX中顶部菜单依次点击 “发行” “快应用-华为”即可在 /unpackage/dist/build/quickapp-webview 生成华为快应用项目代码。 在华为开发者工具中导入生成的华为快应用项目测试项目代码运行正常后点击”构建“打包正式版在华为快应用后台上传。 发布为QQ、快手、飞书、京东小程序 内容同上不再重复。 发布的快捷键是Ctrlu。同样可拉下快速发布菜单并按数字键选择。
6.2 命令行发布
npm run build:%PLATFORM%7、补充
7.1 %PLATFORM%取值 7.2 cli创建项目和HBuilderX可视化界面创建项目的区别
cli创建的项目是传统的node项目结构。工程代码在src目录下编译器在项目下编译结果在dist目录下。HBuilderX可视化创建的项目是一种免node开发概念。工程代码在项目目录下编译器在HBuilderX目录下而不是项目下编译结果在项目的unpackage目录下。 有些习惯了cli的开发者使用HBuilderX可视化模式时不适应。讲解下它们的差别以及为什么HBuilderX提供了多种方式。 cli创建的项目也可以拖入HBuilderX编辑 首先HBuilderX作为通用编辑器兼容传统的cli方式开发。不止uni-app的cli其他框架的cli也可以拖入HBuilderX。 也就是HBuilderX里可以使用可视化界面创建项目也可以使用cli命令行创建项目都可以达到和uni-app更好协作的目的。比如pages.json跳转和提示、manifest可视化界面、条件编译、rpx等css单位…众多 for uni-app 的优化都可以使用。 这些是HBuilderX的特点和项目结构无关。
如想用其他ide开发uni-app只能使用cli模式
很好理解。因为其他ide没有内置uni-app的编译器所以其他ide开发uni-app只能把编译器安装在项目下也就是cli创建的项目格式。
cli项目可以使用多种ide开发但ide之间有区别
HBuilderX为uni-app做了大量优化其他ide搭配uni-app使用也可以用但没有为uni-app优化过其他ide没有uni-app的app和uniCloud的运行、调试工具。这些工具在HBuilderX里。如开发app和uniCloud必须使用HBuilderX。
可视化方式的区别
HBuilderX可视化创建、运行、发布项目底层调用的也是npm的run、build等命令。只是编译器不在项目下而是在HBuilderX的目录下。
