创建第一个微信小程序 uni-app + Vue3 + Color UI + Webstorm_vue3开发微信小程序

最近打算撸一个小程序练练手，顺便记录下开发过程。。也欢迎感兴趣的小伙伴交流小程序开发经验！

大概会有一个系列的博客吧（尽量不太监

目录

一、前置步骤

1.1 注册微信小程序账号，取得AppID

1.2 下载并安装微信开发者工具

二、uni-app

2.1 下载并安装 HBuilderX

2.2 新建uni-app项目

2.3 使用npm（可选）

 三、Color UI

3.1 运行官方demo

3.2 引入Color UI

3.3 浅试一下Color UI的效果，将原生导航栏替换为自定义样式

四、使用Webstorm替代HBuilderX

4.1 用vue-cli创建模板项目

4.2 迁移原来的HBuilderX项目

五、uni-app，从入门到放弃

---

一、前置步骤

1.1 注册微信小程序账号，取得AppID

网址：开始 | 微信开放文档

1.2 下载并安装微信开发者工具

网址：微信开发者工具下载地址与更新日志 | 微信开放文档

安装完之后记得在 设置 / 安全设置 里打开服务端口

二、uni-app

uni-app是一个基于vue的前端跨端框架，编写一套代码，可以发布到小程序、客户端、web端等各个平台。考虑到uni-app庞大的用户群体（生态好），以及项目未来的移植到其他平台的可能性，即便目前只需要开发微信小程序，uni-app依旧是一个不错的选择。

官方文档：uni-app官网

2.1 下载并安装 HBuilderX

HBuilderX是uni-app的官方IDE，不仅可以用来写代码，还可以针对不同平台编译、运行代码，并打包发布相应的版本。在微信小程序场景下，HBuilderX会将uni-app代码编译成微信小程序支持的代码格式，然后将项目导入本机上的微信小程序开发工具以供预览、上传等操作。

官方文档：uni-app官网

2.2 新建uni-app项目

跟着界面提示无脑操作即可，唯一需要注意的是新建完项目之后要把微信小程序的AppID复制到 manifest.json / 微信小程序配置 / AppID 里面。Vue版本我选的是3。

点击菜单栏的 运行 / 运行到小程序模拟器 / 微信开发者工具 就可以运行了

点击 发行 / 小程序-发行 可以将代码发行到小程序平台，这一步可以选择让HBuilderX直接把代码上传到小程序后台，也可以自行去微信开发者工具里上传。

上传成功后就可以在微信小程序后台的 管理 / 版本管理 看到最新的开发版本了。用手机微信扫描二维码即可在手机上预览。

2.3 使用npm（可选）

HBuilderX新建的项目默认是不带npm的，如果想要依赖管理的话要手动初始化npm项目

npm init -y

 三、Color UI

Color UI是一个高颜值的css库，注重视觉交互。下载github的源代码，然后把colorui文件夹复制到项目的根目录下面就可以了，具体看github的README。

ps 虽然npm上面也有colorui，但官方并没有在维护，所以不推荐用npm。

Github地址：GitHub - weilanwl/coloruicss: 鲜亮的高饱和色彩，专注视觉的小程序组件库

官方文档：ColorUI

3.1 运行官方demo

在微信开发者工具中导入colorui的demo文件夹，就可以预览所有样式了。看中什么直接copy！（财大气粗脸

3.2 引入Color UI

在App.vue中导入两个核心css文件

<style lang="scss">
	...
	
	/* 引入Color UI */
	@import 'colorui/main.css';
	@import 'colorui/icon.css';

3.3 浅试一下Color UI的效果，将原生导航栏替换为自定义样式

官方文档给的例子是Vue2的，不适用于Vue3，因此以下实现会和官方文档不太一样

step 1 修改pages.json，把导航栏样式改为“custom”，完成这一步之后默认导航栏会消失

{
	"pages": [{
		...
	}],
	"globalStyle": {
		...
		"navigationStyle": "custom"
	}
}

step 2 在main.js中把cu-custom组件注册到app中，cu-custom就是是color ui官方包自带的导航栏组件

import { createSSRApp } from 'vue'
import App from './App.vue'
 
import cuCustom from './colorui/components/cu-custom.vue'
 
export function createApp() {
  const app = createSSRApp(App)
  app.component('cu-custom', cuCustom)
  return {
    app
  }
}

step 3 在App.vue中获取系统导航栏的尺寸，并暴露为全局变量

<script>
	import app from './main'
	
	export default {
		globalData: {
 
		},
		onLaunch: function() {
			let app = this
			uni.getSystemInfo({
				success: function(e) {
					app.globalData.StatusBar = e.statusBarHeight
					let custom = wx.getMenuButtonBoundingClientRect()
					app.globalData.Custom = custom
					app.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight
					console.log(app.globalData)
				}
			})
		},
        ...

step 4 在pages/index/index.vue页面中使用导航栏组件

<template>
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">导航栏</block>
	</cu-custom>
	<view class="container">
		<view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
		<text class="intro">详见：</text>
		<uni-link :href="href" :text="href"></uni-link>
	</view>
</template>

step 5 修改colorui/cu-custom.vue的代码，使用app.globalData中的数据作为StatusBar和CustomBar

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				let app = getApp()
				var StatusBar= app.globalData.StatusBar;
				var CustomBar= app.globalData.CustomBar;
				...

预览的效果大概这样：

四、使用Webstorm替代HBuilderX

开发过程中HBuilderX经常出现缓存过期的问题，非常不顺畅，所以还是换回了以前写网页常用的Webstorm。可以用npm来管理编译/运行。

4.1 用vue-cli创建模板项目

HBuilderX内置了uniapp的编译与运行工具，因此用HBuilderX直接创建的项目是不能脱离HBuilderX运行的，当然官网也没有写如何将HBuilderX项目迁移到更通用的平台。好在根据这篇文档，我们可以用vue-cli创建一个基于npm的uniapp模板项目。

注意node版本要>=14.0.0，如果版本太低建议提前重装，官网地址：Node.js

4.2 迁移原来的HBuilderX项目

把源码复制到模板项目的src/文件夹下即可。使用下面的命令编译代码，然后用微信开发工具打开dist/build/mp-weixin文件夹就可以预览、上传了。

// 安装依赖
npm install
 
// 编译
npm run build:mp-weixin

五、uni-app，从入门到放弃

劝退我的大概是这样几个理由：

• HBuilderX与主流前端生态割裂，相当于黑盒，应用离开HBuilderX后无法直接运行，相当于被uniapp锁死了。
• 正式版模板中没有vue3的选项，想要vue3只能通过degit下载Vue3/Vite版，而degit中默认的源是github，官方给出的替换项又是gitee……
• 使用vue-cli创建的npm模板应用中，uni相关的依赖混乱不清，并且官方没有给出如何管理这些版本的建议。无从得知这些依赖要不要跟着vue版本升级，适配的版本又是什么（例如"@dcloudio/uni-app": "^2.0.2-3080420230530001"，"@dcloudio/uni-app-plus": "^2.0.2-3080420230530001"……
• 一些网传的框架本身的坑，2023年了，uniapp发展的怎么样了? - 知乎