一.Uniapp开发小程序之-第一个hello world程序

朱雀 2022-11-06 09:54 294阅读 0赞

## 前言 ##

最近在研究Uniapp开发小程序，把自己的研究成果整理成文章，一方面新手可以借鉴，一方面做归档方便以后查阅，有错误之处请各位看官指正。

## **一.** **文章内容** ##

*  Uniapp介绍
 *  Uniapp开发环境搭建

## **二.** **Uniapp介绍** ##

### **1.** **为什么要使用Uniapp** ###

就目前而言，小程序已经非常的流行了，市面上的小程序众多：微信小程序、百度小程序、支付宝小程序、字节跳动小程序等等，各种平台的小程序的开发规划不一致导致给程序员带来很大的负担，因为我们需要学习不同平台小程序开发规范，尽管他们的语法看起来都差不多。

为了解决这一问题，Uniapp横空出世，它的目的是让开发者编写一套代码就可以发布到IOS、Android、Web、以及各种小程序平台，达到一次开发到处运行的目的。

微信小程序官方文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/][https_developers.weixin.qq.com_miniprogram_dev_framework]

支付宝小程序官方文档：[https://opendocs.alipay.com/mini/framework][https_opendocs.alipay.com_mini_framework]

百度小程序官方文档：[https://smartprogram.baidu.com/docs/develop/component/component/][https_smartprogram.baidu.com_docs_develop_component_component]

字节跳动小程序文档：[https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/directory-structure][https_microapp.bytedance.com_docs_zh-CN_mini-app_develop_guide_directory-structure]

### **2.** **什么是Uniapp** ###

Uniapp官网：[https://uniapp.dcloud.io/][https_uniapp.dcloud.io]

uni-app 是一个使用 [Vue.js][] 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

DCloud公司拥有800万开发者用户，几十万应用案例、12亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（[详见][Link 1]），腾讯课堂官方为uni-app录制培训课程（[详见][Link 2]），开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（[详见][Link 3]）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70]  
为什么选择Uniapp  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 1]

## **三.** **Uniapp环境安装** ##

### **1.** **软件安装** ###

Uniapp需要有HBuilderX的支持，HBuilderX是通用的前端开发工具，但为uni-app做了特别强化，所以我们需要先安装HBuilderX,然后我们还要安装一个“微信小程序”开发工具，主要是借助它的模拟器来启动Uniapp小程序，所以开始之前，开发者需先下载安装如下工具：

#### 1.1.HBuilderX安装 ####

HBuilderX：[官方IDE下载地址][IDE]，下载之后安装启动，启动界面选择暂不登录，然后进入软件主界面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 2]

#### 1.2.微信小程序开发工具安装 ####

通过 [微信小程序开发工具下载地址][Link 4]下载好之后安装启动，可以使用测试号，创建一个小程序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 3]  
到这，微信小程序开发工具就装好了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 4]

### **2.** **Uniapp项目创建** ###

#### **2.1.** **新建项目** ####

使用HbuilderX, 在菜单栏选择：文件 -> 新建 -> 项目  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FONWGsXp-1615218208852)(file:///C:\\Users\\whale\\AppData\\Local\\Temp\\ksohtml16496\\wps25.jpg)\]][img-FONWGsXp-1615218208852_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps25.jpg]

然后创建项目  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wWbZygPg-1615218208854)(file:///C:\\Users\\whale\\AppData\\Local\\Temp\\ksohtml16496\\wps26.jpg)\]][img-wWbZygPg-1615218208854_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps26.jpg]

#### **2.2.** **目录结构认识** ####

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RSM6GZWF-1615218208855)(file:///C:\\Users\\whale\\AppData\\Local\\Temp\\ksohtml16496\\wps27.jpg)\]][img-RSM6GZWF-1615218208855_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps27.jpg]  
结构说明  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eb2aRtNR-1615218208856)(file:///C:\\Users\\whale\\AppData\\Local\\Temp\\ksohtml16496\\wps28.jpg)\]][img-Eb2aRtNR-1615218208856_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps28.jpg]

#### **2.3.** **启动Uniapp** ####

Uniapp可以使用各平台的开发工具的模拟器来启动测试，我这里选择“微信开发工具”如下  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g9qbIVij-1615218208857)(file:///C:\\Users\\whale\\AppData\\Local\\Temp\\ksohtml16496\\wps29.jpg)\]][img-g9qbIVij-1615218208857_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps29.jpg]

第一次启动，这里需要选择微信开发工具的安装目录  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I3ITBDVL-1615218208858)(file:///C:\\Users\\whale\\AppData\\Local\\Temp\\ksohtml16496\\wps30.jpg)\]][img-I3ITBDVL-1615218208858_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps30.jpg]

观察控制台  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KWY0HkEC-1615218208859)(file:///C:\\Users\\whale\\AppData\\Local\\Temp\\ksohtml16496\\wps31.jpg)\]][img-KWY0HkEC-1615218208859_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps31.jpg]

然而在HBuilder的控制台这里出现了错误，意思是需要我们去开启“微信开发工具”的服务端口，否则HBuilder是没有办法使用“微信开发工具的”，按照提示打开微信开发工具 -> 设置 -> 安全设置  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5jd9bFgo-1615218208859)(file:///C:\\Users\\whale\\AppData\\Local\\Temp\\ksohtml16496\\wps32.jpg)\]][img-5jd9bFgo-1615218208859_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps32.jpg]  
打开服务端口  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NNqA1duG-1615218208861)(file:///C:\\Users\\whale\\AppData\\Local\\Temp\\ksohtml16496\\wps33.jpg)\]][img-NNqA1duG-1615218208861_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps33.jpg]  
再次运行，观察微信开发工具的模拟器，如下说明已经启动成功  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dHn3YsoL-1615218208862)(file:///C:\\Users\\whale\\AppData\\Local\\Temp\\ksohtml16496\\wps34.jpg)\]][img-dHn3YsoL-1615218208862_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps34.jpg]

当然我们说uniapp是一次编码到处运行，它除了可以打包成微信小程序运行还可以打包成其他的小程序，或者web端去运行，比如：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 5]  
效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 6]

文章结束，喜欢的话就给个好评吧

[https_developers.weixin.qq.com_miniprogram_dev_framework]: https://developers.weixin.qq.com/miniprogram/dev/framework/
[https_opendocs.alipay.com_mini_framework]: https://opendocs.alipay.com/mini/framework
[https_smartprogram.baidu.com_docs_develop_component_component]: https://smartprogram.baidu.com/docs/develop/component/component/
[https_microapp.bytedance.com_docs_zh-CN_mini-app_develop_guide_directory-structure]: https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/directory-structure
[https_uniapp.dcloud.io]: https://uniapp.dcloud.io/
[Vue.js]: https://vuejs.org/
[Link 1]: https://docs.alipay.com/mini/ide/0.70-stable
[Link 2]: https://ask.dcloud.net.cn/article/35640
[Link 3]: https://ask.dcloud.net.cn/article/35947
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70]: /images/20221023/34a14a6419ba46099e51070f8c98bd98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 1]: /images/20221023/167ea01565714d1594dc59cc63b1e5e1.png
[IDE]: https://www.dcloud.io/hbuilderx.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 2]: /images/20221023/84539e33650e4b70b3a63c16a94bcd68.png
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 3]: /images/20221023/dfd19652408e49e58afd0401753dbfcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 4]: /images/20221023/e892ab0971554460bce66369701bb3a2.png
[img-FONWGsXp-1615218208852_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps25.jpg]: /images/20221023/47b902eb99604527b0cd45fa028c39b6.png
[img-wWbZygPg-1615218208854_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps26.jpg]: /images/20221023/8fb261a9e40d49ae8db51b42271ea4e0.png
[img-RSM6GZWF-1615218208855_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps27.jpg]: /images/20221023/d199f23d939e4ddd8fd44bcab20fb17b.png
[img-Eb2aRtNR-1615218208856_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps28.jpg]: /images/20221023/ebbe0bcc865a421ba0beae8d0821f1df.png
[img-g9qbIVij-1615218208857_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps29.jpg]: /images/20221023/4bd2e8fef49c47eb83f7c7ad4e9c9103.png
[img-I3ITBDVL-1615218208858_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps30.jpg]: /images/20221023/ede5bf0ca27c46a08e2e85262093c02d.png
[img-KWY0HkEC-1615218208859_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps31.jpg]: /images/20221023/8200635a196d4cd2bcaa269498b01226.png
[img-5jd9bFgo-1615218208859_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps32.jpg]: /images/20221023/9a6a276f153c43b8af93d1f4eba8c6d3.png
[img-NNqA1duG-1615218208861_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps33.jpg]: /images/20221023/0c7d115c9d674855b20ff90a88c7f9d4.png
[img-dHn3YsoL-1615218208862_file_C_Users_whale_AppData_Local_Temp_ksohtml16496_wps34.jpg]: /images/20221023/37c050922f8340589913c438cbf03468.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 5]: /images/20221023/d1ebd1cd2fb34ec988057f00efd756a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0OTQxNDg_size_16_color_FFFFFF_t_70 6]: /images/20221023/667c3df13b624e9aa830406a921ae83f.png