当前位置: 移动技术网 > 互联网>腾讯>微信 > uni-app入门(一)-微信小程序开发

uni-app入门(一)-微信小程序开发

2020年07月24日  | 移动技术网互联网  | 我要评论
uni-app入门详解uni-app新项目创建uni-app中tabbar设置HBuilder X连接微信开发者工具

开发工具

HBuilder X和微信开发者工具(根据需求选择)

创建项目

  1. 打开HBuilder X,点击文件——新建——项目
    在这里插入图片描述
  2. 使用默认模板,输入文件名直接创建
    在这里插入图片描述
    完成项目创建后生成的文件信息,个人理解是这样的

HBuilder X连接微信开发者工具

  1. HBuilder X中点击运行——运行到小程序模拟器——运行设置
  2. 输入微信开发者工具的安装目录
    在这里插入图片描述
    除了微信开发者工具还可以连接其它的开发工具
  3. 进入微信开发者工具进行设置
    在这里插入图片描述
  4. 回到HBuilder X中,将项目运行到微信开发者工具中
    运行——运行到小程序模拟器——微信开发者工具
    微信开发者工具会自动打开,显示页面

创建新页面

直接右击pages文件夹,选第一个创建页面就ok,按需选择
在这里插入图片描述
创建完成后点开pages.json
在这里插入图片描述

配置tabbar

直接打开uni-app官网找到tabbar
链接: https://uniapp.dcloud.io/collocation/pages?id=tabbar.
复制到pages.json中,并且和pages同级
在这里插入图片描述
修改list中pagePath的路径为页面路径就ok
其它的意思看api,里面写的很详细

完事保存,自动编译,打开微信开发者工具可以看到
在这里插入图片描述

本文地址:https://blog.csdn.net/xnMorning/article/details/107549400

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网