uni-app从创建到运行到微信开发者工具

uni-app是一个基于Vue.js开发跨平台应用的前端框架

解决了原生小程序编写的繁琐，只要你会vue就可以通过uni-app编写小程序

首先开发工具我推荐HBuilder，虽然我比较喜欢VScode，但这个真的很适合写uni-app,而且uni-app官方推荐使用HBuilderX来开发uni-app类型的项目

好处：模板丰富、有完善的代码提示、可以一键运行到多个平台来预览我们的项目
也可以使用VScode等自己熟悉的编辑器

下载HBuilderX

地址：https://www.dcloud.io/hbuilderx.html

选择下载正式版》App开发版

解压（纯英文目录）   双击HBuilderX.exe即可启动

在HBuilderX中安装scss/sass编译插件

方便编写css样式<style lang="scss"></style>
地址：https://ext.dcloud.net.cn/plugin?name=compile-node-sass
登录，没有账号先注册，
登录成功后，先打开一下HBuilderX，点击绿色的使用HBuilderX导入插件

点击确定跳转到HBuilderX

点击安装，等待安装成功即可

 

 文件》新建》项目

项目名字、路径、推荐选择uni-ui项目、vue版本的选择

创建即可

 

 登录自己的小程序微信公众平台，复制粘贴自己的微信小程序的AppID

在HBuilderX配置微信小程序（粘贴自己的AppID）如图：

 HBuilderX中配置微信开发者工具的安装路径
首先要下载微信开发者工具然后：
工具》设置》如图

 在微信开发者工具中，设置》安全设置》开启服务端口：如图

 运行
首先关闭微信开发者工具
在HBuilderX中
运行》运行到小程序模拟器》选择第一个默认微信开发者工具
点击后则会自动将项目运行到微信开发者工具中
如图

 运行后会自动打开微信开发者工具，并将运行的项目运行起来

如果运行后出现白屏问题，关闭微信开发者工具，在HBuilderX中停止运行项目，然后再重新运行一遍

 吼吼吼，完事儿啦！！！