可选的小程序框架
我们主要分析了如下小程序开发框架,主要包括:
框架 | 技术栈 | 案例 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | H5 | App |
---|---|---|---|---|---|---|---|---|
uni-app | Vue | 丰富 | ⭕ | ⭕️ | ⭕️ | ⭕ | ⭕️ | ⭕ |
Taro | React | 丰富 | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ |
wepy | Vue | 丰富 | ⭕ | ❌ | ❌ | ❌ | ❌ | ❌ |
mpvue | Vue | 丰富 | ⭕ | ❌ | ❌ | ❌ | ⭕️ | ❌ |
首先,就要排除 Taro ,因为没用React开发过项目。只有Vue技术栈。
本人选型方案 :Uni-app (NVue )+ Vue2
结合本人自身知识系统(Vue2,Webstorm),综合相关框架了解,选择了以下方案:
开发环境:HBuilder X + Webstorm +微信开发者工具(微信小程序必须要用)
框 架:Uni-app (NVue )+ Vue2
uni-app创建项目:
vue-cli脚手架创建,通过cmd命令行创建。
# 全局安装
vue-cli $ npm install -g @vue/cli
# 创建uni-app项目
$ vue create -p dcloudio/uni-preset-vue my-project
# 进入项目目录
$ cd my-project
# 运行到微信小程序,调试模式
$ npm run dev:mp-weixin
# 发行到微信小程序
$ npm run build:mp-weixin
使用Webstorm来开发配置
webstorm开发的uniapp + hbuilderx进行app 小程序打包
1. 创建项目
-
使用vue2 CLI创建uni-app项目
vue2环境,node.js, cli脚手架必须要有,这里就不详说了。
模版名字这个是固定,必须要输入 : dcloudio/uni-preset-vue
创建一个新目录,window终端cmd执行以下语句
vue create -p dcloudio/uni-preset-vue my-project
(如果已有项目,cd后直接 npm install )
这里我选择了:默认模板, 默认模版使用的vue2,
如果选择了:Hello uni-app 模版。 使用的vue3
创建uniapp vue项目完成。
2.运行
这样通过终端创建的uni-app项目,在webstorm上node_module目录与常规web项目是一样,整个开发期间都可以在webstorm上直接调试运行:
在webstorm terminal上运行项目,仅限手机端web效果:
npm run dev:h5
注:
如果,想看微信小程序或者android app端的效果,那么就要HBuiler来运行了,通过上面方式创建的项目也是可以正常在HBuiler运行的。接下来介绍要结合HBuilder来进行编译运行打包。
3. HBuilder 配置
3.1 HBuilderX 安装
官网下载,并安装,安装完成之后进入Dcloud注册一个账号 :DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架uni-app多端开发,开发一次同时生成App、小程序、H5https://dcloud.io/
3.2 DCloud开发者认证
运行打包之前,需要使用HBuilder的开发都需要,认证手机号。认证页面:
开发者中心https://dev.dcloud.net.cn/pages/user/realname
3.3 导入项目
导入官方的Demo项目源码,或者上面创建的项目。(File->import->选择项目根目录)
- 导入项目1: 我这里是:导入上面指令创建项目
- 导入项目2: 官方hello-uniapp DEMO项目
下载源码:
GitHub - dcloudio/hello-uniapp: uni-app框架演示示例uni-app框架演示示例. Contribute to dcloudio/hello-uniapp development by creating an account on GitHub.https://github.com/dcloudio/hello-uniapp
注:
GitHub有时候打开不了,备用:
hello-uniapp: Uniapp官方demohttps://gitee.com/wyf13418531395/hello-uniapp
4.打包 Android APK
完成上面步骤3项目导入之后,在HBuilerX,打包原生APP apk安装包: Build=>Mobile App Cloud packaging。
4.1 配置项目的Appid(必须)
当前项目第一次打包,没有配置AppID,点击 Modify-> manifest.json。
配置一个由DClound自己账号下生成一个应该的AppID。
在登录情况下点击:【Reacquire】会自动生成。
然后保存再回到打包界面
4.2 本地配置好APK签名证书文件,导入证书与对应密码。
4.3 遇到打包问题:读通讯录权限对象
解决:
将Read_contacts权限注释
5.Android APK 安装到手机:
打包完成之后,打开APK目录,右键选择安装到真实手机上。
6.打包成微信小程序
首先:下载并安装微信开发者工具,然后这个开发者工具需要到其他网上注册一个开发者账号,否则运行不程序。
在HBuilerX打开上面用脚手架创建uniapp或者用官方的hello uniapp项目,
5.1 配置小程序开发者工具
如果是第一次运行微信小程序,这里HBuilder需要配置一下开发者工具安装目录exe。这样才能自动打开对应微信小程序界面。
5.2 配置微信开发者工具安装目录之后,报端口错误时
在开发者工具打开:服务端口
5.3 小程序运行
打开成功,在微信小程序开发者工具界面如下:
这种情况下的修改,可以实时热更新到微信开发者中。
7. 微信小程序项目打包上传
7.1小程序开发版打包
按上面步骤之后,HBuilder会自动发布一个开发版的小程序项目,在不需要修改代码情况下,可以直接用微信开发工具打开此项目运行查看效果。
7.2 正式版打包
Build->Mini-program-Wechat->Build
7.3 之后在unpackage->dist->build目录下会生成mp-weixin, 此目录就是微信小程序项目
区别dev版,build代码压缩过。项目包更小。
8.使用微信开发者工具打开上面目录项目,点击上传,然后等待微信客服审核。
8.打包PC web网页
这个最简单了,只要有浏览器在就OK
打开运行完成。
9. HBuilderX 与WebStorm配合开发uni_app
webstorm用习惯了,
基于webstorm+hbuilderX两个编译器结合开发uni-app程序
以上面的操作方案(脚手架创建 Webstorm 开发 + HBuilder打包):
用cmd指令脚手架创建uniapp项目,然后在webstrom上可以运行html5调试并开发。
但是打包到小程序与Android APP(apk)只能的用HBuilder。
最新版的Hbuilder X创建uni-app项目:
【采用Vite方法创建】导致无法生成package.json文件,且不会自动安装node_modules的库,为此【Hbuilder X】创建的uni-app,无法在webstorm正常编译!
为了同时支持webstorm+hbuilderX配合开发编译,首先请使用vue-cli3的脚手架创建一个Vue3 的初始项目,然后把其中的【package.json】文件拷贝到uni-app,在执行【npm install】此时在webstorm即可正常开发uni-app了
注意:虽然webstorm无法正常编译运行uni-app项目,但是对于【Ctrl+B】跳转路径来说,webstorm要方便很多,其次就是在【package.json】定义ESlint的规则,要方便很多!
此方案运行与打包在:
HBuilder X
更多详情参考:
Webstorm 玩转uni-app 项目 微信小程序 移动端项目方案_Lan.W的博客-CSDN博客
扩展
区分PC端与移动端技术:
PC端 : VUE+elementui
移动端 : Uni-app小程序 + Vant weapp组件
uni-app
uni-app是 DCloud 出品的新一代跨端框架,可以说是目前跨端数最多的框架之一了,目前支持发布到:App(Android/iOS)、H5、小程序(微信小程序/支付宝小程序/百度小程序/字节跳动小程序),目前市面上类似的框架还有:Taro(京东出品)、Megalo(网易出品)。
uni-app 的 nvue 说白了就是 weex 的那一套东西,uni-app App端内置了一个基于 weex 的SDK 改进的原生渲染引擎,提供并实现了 App 端了原生渲染能力。
weex 支持的东西,在 nvue 里大多都是支持的,所以这里就不详细讲述 weex 的相关组件和 api 调用,只讲述一些在实际开发过程中遇到的一些小问题。
Nvue
是native vue的缩写,是uni-app的一种渲染方式。
nvue用的是weex方式的原生渲染,nvue的css写法受限,nvue页面只能使用flex布局,不支持其他布局方式,如果不开发APP,那么不需要使用nvue;Weex渲染:Weex是使用流行的web开发体验来开发高性能原生应用的框架。
而vue文件用的是webview渲染,Webview是一个基于webkit的引擎,可以解析DOM元素,展示html页面的控件,他和浏览器展示页面的原理是相同的,所以可以把它当做浏览器看待。
weex简介
Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。
nvue和vue的区别:
nvue是native vue的缩写,是uni-app的一种渲染方式。
nvue用的是weex方式的原生渲染,nvue的css写法受限,nvue页面只能使用flex布局,不支持其他布局方式,如果不开发APP,则不需要适用nvue。weex渲染:weex是使用流行的web开发体验来开发高性能原生应用的框架。
vue文件用的是webview渲染,Webview是一个基于webkit的引擎,可以解析DOM元素,展示html页面的控件,他和浏览器展示页面的原理是相同的,所以可以把它当做浏览器看待。
MintUI
Mint UI 是饿了么前端团队出品的移动端 UI 组件库。
基于 Vue 2.0 构建,继桌面 UI 组件库 Element UI 后又一个优秀的开源 UI 组件库,包含丰富的 CSS 和 JS 组件,能够快速构建出风格统一的页面,提升开发效率。
和Bootstrap一样对原生的HTML标签进行了封装,进行了美化,让我们能够专注于业务逻辑而不是UI界面。
Mint UI 组件库特性
- UI 设计风格中性,不需要改样式就能适应很多产品项目
- 轻量化。依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化,即便引入全部组件,压缩后的文件体积也仅有 30kb 左右(gzip)
- 性能优秀。各种动效采用 CSS3 处理,避免浏览器进行不必要的重绘和重排,从而获得流畅顺滑的体验
- 按需加载组件。支持只加载声明过的组件及其样式文件,中小项目能大大减少打包体积
- 官方文档:mint-ui documentation
Vant
有赞前端开发团队推出的一款基于VUe的移动端UI框架,和Bootstrap一样对原生的HTML标签进行了封装,进行了美化,让我们能够专注于业务逻辑而不是UI界面。(通常用于电商界面制作)
官方文档:Vant 2 - Mobile UI Components built on Vue文章来源:https://www.toymoban.com/news/detail-714348.html
参考:
Taro vs uni-app选型对比经历 - 简书文章来源地址https://www.toymoban.com/news/detail-714348.html
到了这里,关于WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!