如果你已经确定了,使用uni-app进行程序开发,可依照本文开始
如果你还纠结使用哪种框架开发,那本文要让你失望了。

uni-app官网:https://uniapp.dcloud.net.cn/
uni-app的优点就是可以多端发布,ios,android,小程序,web

ui框架比较热的有uni-ui和uView

uni-ui:
插件地址:
https://ext.dcloud.net.cn/plugin?id=55
文档:
https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html

uView:
插件地址:
https://ext.dcloud.net.cn/plugin?id=1593
文档:
https://www.uviewui.com/components/intro.html

是否开源发展状况维护方兼容性文档质量最近一个版本发布日期
uni-ui完全开源已经成熟官网维护甚至准备兼容PC端文档质量较差1.4.26(2023-01-31)
uView完全开源还在完善第三方维护除了小程序对其他平台兼容性较差文档相比uni-ui更加友善2.0.34(2022-09-25)

综上所述,目前uView开发更加流行(但根据更新日期不排除有一定跑路可能),uView组件可自定义程度高,社区相关问答更加活跃,所以选择uView(头铁)

开发环境有两种:

一种下载HBuilder,一种vue-cli命令行开发(配合其他编译器)

选择下载HBuilder,因为更加容易上手
下载地址:
https://www.dcloud.io/hbuilderx.html
选择window下的正式版即可(傻瓜式安装)

微信开发者小程序下载参考:
https://blog.csdn.net/weixin_45522071/article/details/106359734?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167844867416800226573449%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167844867416800226573449&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2alltop_positive~default-1-106359734-null-null.142^v73^control_1,201^v4^add_ask,239^v2^insert_chatgpt&utm_term=%E5%BE%AE%E4%BF%A1%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%E4%B8%8B%E8%BD%BD&spm=1018.2226.3001.4187

如出安装过程中出现修改系统环境变量Path失败,按提示添加即可
https://blog.csdn.net/angrynouse/article/details/126539553

新建项目

新建,项目

uniapp入门1.png

右上角搜索uView模板

uniapp入门2-1.png

找到右侧作者排行,uview点击

uniapp入门2-2.png

选择uview2.0

uniapp入门2-3.png

选择右侧蓝色按钮点击(使用H导入示例项目)

uniapp入门2-4.png

回到HBuilderX,上方导航栏,工具->插件安装->安装新插件->前往插件市场安装
重复上面步骤,找到uview作者,来到uview2.0
这次点击右侧绿色按钮(使用H导入插件)

出现下图,合并即可。

uni-app入门2-5.png

运行项目

uni-app3.png

提示我:

uniapp入门4.png

来到微信开发者小程序,设置,安全,开启服务端口

uniapp入门5.png

重新运行项目

uni-app入门2-7.png

uni-app入门2-8.png

win!!!成功运行

接下来还需要完善uView的配置

引入uview需要如下这一套
https://www.uviewui.com/components/downloadSetting.html

配置步骤的1、2、3我都跟着做了
4、配置easycom组件模式我并未设置,设置了会更加方便开发,我没设置是因为已经习惯了vue的原有组件导入方式

想知道有什么区别,设置后方便在哪,可以看官网说明:
https://uniapp.dcloud.net.cn/tutorial/page-component.html

配置后一定要重启HBuilder X,

重启设置才能生效

开发过程中重启可以解决90%的简单问题

开启uni-app学习之旅

在官网学习相关语法,项目文件结构,官方组件
https://uniapp.dcloud.net.cn/tutorial/

uView组件
https://www.uviewui.com/components/feature.html

微信官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/

上述官方文档和uView文档提供了非常多的组件以及示例,非常方便快速开发

BUG

开发初期常见bug
1、

[渲染层网络层错误] Failed to load font https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf
net::ERR_CACHE_MISS 
(env: Windows,mp,1.06.2303060; lib: 2.30.3)

忽略就可以了,没什么影响(看帖子说和异步加载有关)

2、

Error: components/Tabbar-uview.js 已被代码依赖分析忽略,无法被其他模块引用。你可根据控制台中的【代码依赖分析】告警信息修改代码,或关闭【过滤无依赖文件】功能。详情请查看:https://developers.weixin.qq.com/community/develop/article/doc/00020631afc6c8c6f62e7b91855c13
    at Tabbar-uview.js?t=wechat&s=1678585258856&v=14a13afaf7e9b3195fe321fcc122c6cf:1
    at I (WASubContext.js?t=wechat&s=1678585258856&v=2.30.2:1)
    at <anonymous>:1099:7
    at doWhenAllScriptLoaded (<anonymous>:1148:21)
    at Object.scriptLoaded (<anonymous>:1176:5)
at Object.<anonymous> (<anonymous>:1201:22

找到manifest.json,以源码的形式查看(直接在文件夹里找到文件用记事本打开也行)
只需在“project.config.json”=>“setting”里面将"ignoreDevUnusedFiles"和"ignoreUploadUnusedFiles"都设置为 false,然后保存,重新编译即可。

3、
运行微信开发工具手机模拟器经常会出现未更新,内容不加载问题
重启可解决问题

都看到这了赏个赞吧