uni-app开发小程序并运行起来(使用ColorUI)

uni-app开发小程序步骤详解

最近接到一个项目 开发一个小程序 主要是早教的培训机构使用 打算用uni-app来开发小程序 到时候打包成小程序就可以了 主要是用uni-app配合colorui使用

准备工作：

工具：
1、 uni-app的好伙伴 Hbuilder X
2、 微信开发工具下载安装好 下载地址
3、 colorUI 下载地址

第一步 创建uni-app项目

2. 运行并引入colorUI

选择项目 → 运行 → 运行到浏览器 能运行起来说明项目没有问题

接着把UI框架引入到项目中 如果不想用UI框架就跳过 引入colorUi很简单 , 下载解压下来 把colorui直接剪切到你的项目中

接着 引入colorUI的全局css 在我们的App.vue页面中引入

接着在程序中配置微信开发者工具的安装地址不然程序无法启动

选择 工具 → 设置 → 运行配置 → 把你安装微信开发工具的目录地址放进去

3. 运行到小程序

前两步的完成说明我们的项目已经成功并引入了UI框架 接着到微信开发工具中

1. 第一步 在Hbuilder 选择运行项目到小程序模拟器 我这里因为已经启动了所以是停止运行

2. 第一次运行到程序肯定会报错 是因为你小程序的服务端口没有打开 报错界面下图

3. 打开端口 选择设置 → 安全设置 → 将服务端口打开

4. 运行成功