用处
使用Vue.js框架,可以使代码发布到多种平台,减少学习成本和开发成本。
环境搭建
工具
HbuilderX 下载地址:HBuilderX 文档
微信开发者工具 下载地址:微信开发者工具下载_微信开发者工具官方版下载[制作工具]-下载之家
项目创建
打开HbuiderX 点击新建 项目 选择uni-app 进行创建
创建成功后自动生成的文件名等结构
运行文件---点击运行,内置浏览器(需要下载)
运行成功后点击local后面的网址,进入网址按f12进入网页的开发者模式(需要在网页设置中打开)-----点击如图所示的图标,就可以看到页面在移动端的显示格式。
创建新的页面,在pages文件夹中点击有点,新建页面,注意:勾选下方在pages.json中注册
微信开发者工具的使用,下载好以后点击运行小程序模拟器中的微信开发者工具,配置工具的安装目录
配置后,手动打开微信开发者工具进行服务器端口的开启
打开后使用微信开发者工具运行程序
内部一些标签解释
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录
├─platforms 存放各平台专用页面的目录
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录,详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路由、导航条、选项卡等页面类信息