跨平台应用开发进阶(六十三)：微信小程序开发_跨平台开发小程序用什么(1)

最新推荐文章于 2025-03-23 19:55:56 发布

2401_84446963

最新推荐文章于 2025-03-23 19:55:56 发布

阅读量1k

点赞数 20

分类专栏：程序员文章标签：小程序微信小程序

本文链接：https://blog.csdn.net/2401_84446963/article/details/138431475

版权

程序员专栏收录该内容

156 篇文章

订阅专栏

最近一次更新版本v1.10.0，日期2021-12-21，有专门的维护团队和社区。

推荐原因：Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护多年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。50+组件

优点：组件丰富。
缺点：因为版本更新，造成官网上存在部分内容更新不及时，对新手不太友好。

GitHub地址

开发文档/效果地址

2.3.3 iView Weapp

iView Weapp是由 TalkingData 发布的组件库，一套高质量的微信小程序 UI 组件库。

最近一次更新版本2.0.0，日期2018-07-28

GitHub 地址

开发文档

效果地址需要在开发文档地址中通过微信小程序的方式体验。

2.3.4 ColorUI

鲜亮的高饱和色彩，专注视觉的小程序css组件库。

GitHub 地址

展示地址

开发文档参考: 暂未找到官网地址，有一篇使用教程推荐https://blog.csdn.net/miao_yf/article/details/102971767 配合 https://www.kancloud.cn/als24/color/1141392

2.3.5 Wux Weapp

80+ 丰富的组件，能够满足移动端开发的基本需求。
最近一次版本更新是v3.8.8，日期：2021-04-12

GitHub 地址

开发文档

2.3.6 TaroUI

Taro 是一款基于 Taro 框架开发的多端UI 组件库。一套组件可以在微信小程序，支付宝小程序，百度小程序，H5 多端适配运行（ReactNative 端暂不支持）,但需要学习Taro编译工具。

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、RN等）运行的代码。

GitHub 地址

开发文档/效果地址

2.3.7 MinUI

MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架，各种小程序组件主流框架等。

三、创建一个UNI-APP项目

下一步就是创建一个uni-app项目。可以在DCloud官网上下载uni-app的开发工具，并进行安装。在安装完成后，可以通过“新建项目”来创建一个新的uni-app项目。其中，需要注意选择小程序作为平台，同时输入之前得到的appid和项目名称等相关信息。

① 配置manifest.json文件，配置微信小程序AppID。

在这里插入图片描述
微信小程序AppID 哪里来？登录微信公众平台，开发管理 --> 开发设置中

在这里插入图片描述

或者通过申请测试号生成微信小程序测试appid。

② 运行微信小程序需要配置配置开发者工具路径，这样 Hbuildx 才知道去哪里打开微信开发者工具。

在这里插入图片描述

③ Hbuildx 配置到此结束，还需要配置微信开发者工具，不然是会运行失败的。

开启微信开发者工具中的服务端口：

在这里插入图片描述

四、进行调试

4.1 启动微信开发者工具

在完成以上两个步骤之后，就可以打开微信开发者工具进行调试了。点击微信开发者工具中的“小程序开发”选项，并选择在之前创建的UNI-APP项目的根目录下进行调试。

4.2 调试UNI-APP页面

在微信开发者工具中，可以直接在左侧进行文件的编辑和保存。并且，当uni-app页面的代码发生变化时，开发者工具会自动地进行更新。此外，可以在右上角的“真机调试”选项中，选择需要进行调试的机型和网络类型等信息。

在这里插入图片描述

4.3 调试uni-app组件

当在uni-app页面中进行组件的调试时，需要注意一些问题。首先，在组件中的代码调试时，可以使用DevTools中提供的一些工具来进行操作，例如“编辑组件”选项可以直接进入组件的编辑页面。其次，在使用vue组件时，需要注意组件名的大小写问题。因为微信小程序只支持小写字母来表示组件名称。

五、微信小程序发布准备

到这里我相信基础的小程序开发部分大家都已经很了解了，那么小程序马上上线需要哪些资料呢？

5.1 配置小程序关联信息(微信公众号关联小程序)

为什么要说配置小程序关联公众号呢？

因为在开发的过程中，遇到过一个客户问怎么获取用户的 UnionID ，但是我们的小程序并没有关联过任何公众号，公众平台，所以要提前确认一下需求；

获取 UnionID 的条件？

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。

在这里插入图片描述

5.2 配置小程序主体信息

为什么要提前配置小程序主体信息呢？看下图

在这里插入图片描述

上面的截图是我们的一个已经上线的小程序，小程序发布后，非个人类帐号可通过认证方式改名。所以我们在上线前最好把能配置的都配置一下，避免上线以后再去更改审核时间长、需要资料多等麻烦事儿！

5.3 配置服务器域名

上面说了我们在开发时候可以通过 IP 来调用后端大哥的 API，那么上线以后肯定是不行了；因每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

在这里插入图片描述