小程序学习-03

路由跳转

原生小程序的跳转

跳转到tabBar

 wx.switchTab({
        url: '../index/index',
      })

跳转到非tabBar页面且不返回

可在登录页面用

    wx.redirectTo({
      url: '../login/login',
    })

跳转到非tabBar页面且可以返回

   wx.navigateTo({
      url: '../addcustomer/addcustomer',
    })

uni-app的构建

基于vue.js的框架
官方建议使用HBuilderX，此处使用vscode，所以使用脚手架搭建。
命令是：

npm install -g @vue/cli

开发规范：

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

1. 页面文件遵循 Vue 单文件组件 (SFC) 规范
2. 组件标签靠近小程序规范
3. 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，
4. 数据绑定及事件处理同 Vue.js规范 同时补充了App及页面的生命周期
5. 为兼容多端运行，建议使用flex布局进行开发 目录结构

页面基础修改

globalStyle:全局配置
navigationBarTitleText:修改标题
navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色，仅支持 black/white

单独配置：会覆盖全局配置

tabBar和原生小程序一样

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"text": "首页"
		}, {
			"pagePath": "pages/message/message",
			"text": "消息"
		}]
	}

开发期间使用：
配置完后可以在开发者工具中直接打开页面

"condition": { //模式配置，仅开发期间生效
    "current": 0, //当前激活的模式（list 的索引项）
    "list": [{
            "name": "swiper", //模式名称
            "path": "pages/component/swiper/swiper", //启动页面，必选
            "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
        },
        {
            "name": "test",
            "path": "pages/component/switch/switch"
        }
    ]
}