1.uniapp环境搭建

uniapp开发小程序

1.安装hubilder和微信开发者工具。HBuilderX:官方IDE下载地址  https://www.dcloud.io/hbuilderx.html微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.

创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目:

1.uniapp环境搭建

3.选择uni-app类型,输入工程名,选择项目存储路径,选择模板uni-ui项目,点击创建,即可成功创建。

1.uniapp环境搭建

4.运行uni-app

a.浏览器运行:进入项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。

 

b.在微信开发者工具里运行:

打开项目中的manifest.json文件,选择微信小程序配置,在微信公众平台查看appid,输入到如下图所示框内。

1.uniapp环境搭建

然后点击工具,选择设置,运行配置,输入web服务器调用rul地址,冒号后面为端口号,选择微信开发者工具路径

(端口号在微信开发者工具里查看,点击设置,安全设置,开启服务器端口就可以看到端口号啦)

1.uniapp环境搭建

进入项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。

1.uniapp环境搭建

注意:以上是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。