欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

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

程序员文章站 2022-03-04 21:27:04
uni-app入门详解uni-app新项目创建uni-app中tabbar设置HBuilder X连接微信开发者工具...

开发工具

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

创建项目

  1. 打开HBuilder X,点击文件——新建——项目
    uni-app入门(一)-微信小程序开发
  2. 使用默认模板,输入文件名直接创建
    uni-app入门(一)-微信小程序开发
    完成项目创建后生成的文件信息,个人理解是这样的

HBuilder X连接微信开发者工具

  1. HBuilder X中点击运行——运行到小程序模拟器——运行设置
  2. 输入微信开发者工具的安装目录
    uni-app入门(一)-微信小程序开发
    除了微信开发者工具还可以连接其它的开发工具
  3. 进入微信开发者工具进行设置
    uni-app入门(一)-微信小程序开发
  4. 回到HBuilder X中,将项目运行到微信开发者工具中
    运行——运行到小程序模拟器——微信开发者工具
    微信开发者工具会自动打开,显示页面

创建新页面

直接右击pages文件夹,选第一个创建页面就ok,按需选择
uni-app入门(一)-微信小程序开发
创建完成后点开pages.json
uni-app入门(一)-微信小程序开发

配置tabbar

直接打开uni-app官网找到tabbar
链接: https://uniapp.dcloud.io/collocation/pages?id=tabbar.
复制到pages.json中,并且和pages同级
uni-app入门(一)-微信小程序开发
修改list中pagePath的路径为页面路径就ok
其它的意思看api,里面写的很详细

完事保存,自动编译,打开微信开发者工具可以看到
uni-app入门(一)-微信小程序开发

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

相关标签: uni-app 小程序