uniapp入门使用(一)

151 阅读2分钟

一、开发前的准备

1.1 下载工具

hbuilder

下载hbuilder编辑器,选择对应的系统,Windows和mac正式版即可,下载好安装路径不要放在C盘,此编辑器作为主要开发编辑器

微信开发者工具

下载微信开发者工具,选择对应的系统,正式版即可,下载好安装路径不要放在C盘,此工具主要用于开发是预览小程序

1.2 申请微信小程序

微信公众平台

进入微信公众平台-> 点击立即注册-> 点击小程序-> 点击前往注册

image.png

填写信息。注意:邮箱需要,未被微信公众平台注册,未被微信开放平台注册,未被个人微信号绑定的邮箱

注册好后,扫码登陆平台,页面向下滚动,找到左边的开发,选择开发管理,右边页面选择开发设置,这里会有一个AppID,作为绑定开发者工具用

image.png

二、新建项目

打开hbuilder编辑器选择文件->新建->项目

image.png

  • 填写项目名称
  • 选择项目存放的路径
  • vue版本选择
  • 默认不启用 uniCloud和git
  • 点击创建

image.png

试运行:

可能会出现没有配置微信开发工具情况,此时需要配置微信开发者工具路径

  • 打开hbuilder编辑器 运行-> 运行到终端-> 运行设置

image.png

  • 点击浏览 选择刚才安装微信开发者工具安装路径

image.png

配置微信开发者工具:

设置-> 安全设置-> 开启服务端口

image.png

运行:

运行-> 运行到小程序模拟器-> 微信开发者工具

image.png

运行成功:

微信开发者工具会自动弹出来,可能没登录需要扫码登录微信开发者工具