Hbuilder-x启动vue微信小程序(写给新人)

597 阅读1分钟

1,下载微信开发者工具

2,获取开发需要的appID

在微信小程序页面登录mp.weixin.qq.com/ 在开发=>开发管理=>开发设置=>开发者ID 中找到AppID(小程序ID)

图1:

image.png

图2:

image.png

3,在开发者工具上使用微信登录

把appId复制到如下图的位置

image.png

打开Hbuilder-x,

3.1),安装依赖 npm install

3.2), 设置Hbuild中的微信开发者工具的路径

图1:

image.png

图2:

image.png

4 依赖安装好后,根据时间情况运行开发模式下的启动命令(package.json=>scripts在这个文件里找),

4.1) 启动

npm run build:weapp

image.png

4.1) 打开开发者工具后就可以看到页面了,修改代码保存后,会热更新到开发者工具的页面里

5,在自己的手机里查看开发中的小程序;

在开发者工具里

5.1)

image.png

5.2)用微信扫码后,就可以在自己的手机里看到了,(加载很慢)

image.png