uniapp的特点
- 一次开发，多端应用
- 使用微信小程序的组件标签和API，使用vue的模板语法和js语法
创建新页面
- 小程序： 在app.json中配置pages,即会在pages文件夹中创建相应的文件
- uniapp: 在pages.json中配置页面，但不会同步的生成文件
- uniapp: 在pages文件夹上右键，新建页面，会同步的在pages.json中自动生成对应的配置
pages.json中pages的配置相当于路由，所有页面都需要在此注册
tabBar的配置
在pages.json中配置
本地静态资源，比如图片，图标文件一定要放在static文件夹中，引用地址的方式参考下方代码
"tabBar": {
"color": "#567788",
"selectedColor": "#f96677",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/static/images/icon0.png",
"selectedIconPath": "/static/images/icon1.png"
},
{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "/static/images/icon2.png",
"selectedIconPath": "/static/images/icon3.png"
}
]
}
页面导航栏标题文本，背景颜色，下拉刷新等相关配置
小程序： 在app.json中全局配置，在每个页面的json文件中给当前页面配置
uniapp: 全局和每个页面的配置都在pages.json中实现
如何运行在微信开发者工具
运行-> 运行到小程序模拟器 -> 微信开发者工具
在弹窗中要定位开发者工具的安装路径：常规安装位置 c:/Program Files/Tencent/微信web开发者工具
在微信开发者工具管理项目的界面 -> 设置 -> 安全 -> 开启服务端口
如果没有开启服务端口，在Hbuiler编译界面会报错：Error: read EBADF-
在manifest.json中填写微信小程序的appid
如果没有填写，在微信开发者工具中会报错：TypeError: Cannot read property 'forceUpdate' of undefined
使用vuex状态管理工具
和vue唯一的不同是不需要安装vuex包
- 创建store文件夹，和index.js，及相关的state,actions,mutations...
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
city: '郑州'
},
actions: {
getData(ctx,city){
setTimeout(()=>{
let newCity = city
ctx.commit("changeData",newCity)
},5000)
}
},
mutations: {
changeData(state,data){
state.city = data;
}
}
})
- 在main.js中引入store并注册
- 在页面中使用时和vue相同
在项目中使用sass
- 在*.vue文件中添加lang="scss"
- 如果没有安装sass,在编译时会报错
- 可在“工具”菜单，选插件安装，会打开插件市场的链接，选择sass,按照引导安装插件即可
- 项目初始化时创建的uni.scss文件不用导入，定义的变量可直接在任一页面中使用
- 引入scss和css文件的语法
条件编译
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
// #ifdef H5
alert("只有h5平台才有alert方法")
// #endif
判断平台
- 编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。
- 在*.vue文件中，template,script,style中都可以添加条件编译，注意在不同区块中注释的写法是不同的
当前城市： {{$store.state.city}}
当前温度： 18度
当前温度： 18度
- 运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台
只能区别机型（ios,Android）
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('运行Android上')
break;
case 'ios':
console.log('运行iOS上')
break;
default:
console.log('运行在开发者工具上')
break;
}
CSS变量
- --status-bar-height 系统状态栏高度
- --window-top 内容区域距离顶部的距离
- --window-bottom 内容区域距离底部的距离
比如：自定义导航栏时，要空出状态栏的位置，可添加一个空的view进行占位
list文本内容
css单位
rpx
页面中引入组件时的easycom规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。
在模板中vue和小程序的区别
动态属性
//数据 url="/images/1.jpg"
//vue
标签内容显示相同
//数据： msg="hello"
{{msg}}
循环遍历
// vue
条件渲染
// vue
用navigator组件进行跳转
id: {{item.id}}
goodsName: {{item.goods_name}}
也可以用uni.navigateTo跳转传参， 在下一个页面中，通过onLoad(options)接收参数
模板向js逻辑传参
uniapp传参
小程序传参
发行
发行h5页面
发行 -> 网站 H5手机版 ------>把项目编译打包在unpackage/dist/build/h5
把该文件夹传给后端即可 （注意： h5页面必须在服务器下才能正常运行）发行微信小程序
发行--->小程序 微信 -----把项目编译打包在/unpackage/dist/build/mp-weixin
可以在微信开发者工具中直接上传该版本发行为原生APP
发行--->原生App 本地打包