小程序的组成
那主要可以分为4个方面:
WXML(Weixin Markup Language):用来构建页面的结构
WXSS(Weixin Style Sheets):样式语言,用来写小程序种的样式
JS:用来写逻辑方面的东西
XX.json:配置文件
各个文件的作用:
1.app.json 能配置全局的 包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
2.wxml 页面结构
微信中使用的是一套自定义的标签,这套标签具有html+css+js效果
3.wxss 样式
(1). 在底层支持新的尺寸单位 rpx ,这个单位是弹性的,类似rem
规定屏幕宽为750rpx,如果在iphone6 375视口下,1px = 2rpx
(2).引入css的方式
@import wxss路径 : 一个wxss导入到另一个wxss中
4.JS 交互逻辑
App({}) 在app.js文件中,控制整个项目的逻辑
Page({}) 在xx.js文件中,控制当前页面的逻辑
小程序中页面路由的知识
打开新页面: wx.navigateTo 或者
页面返回: 调用 API wx.navigateBack 或使用组件或用户按左上角返回按钮
页面重定向:调用 API wx.redirectTo 或使用组件
tab切换:调用 API wx.switchTab 或使用组件 或用户切换 Tab
重启动:调用 API wx.reLaunch 或使用组件
注意:
(1).switchTab 只能打开 tabBar 页面,switchTab不能携带参数
(2).navigateTo, redirectTo 只能打开非 tabBar 页面
(3).调用页面路由带的参数可以在目标页面的onLoad中获取
路由携带参数:
url?key=value&key=value
小程序的模块化
小程序中每个页面都是独立的作用域
跨作用域访问数据:
第一种:可放到全局globalData上
在其他作用域访问时,需要先调用 getApp() 得到App({})中的对象
这个对象上有一个globalData属性
第二种:公共的代码抽离成为一个单独的 js 文件,作为一个模块。这时哪里需要就在哪里引入
对应定义的模块Js要求: 供公共使用的变量或方法,需要导出module.exports
引入方法:
require('公共js文件路径')
封装小程序的数据请求
首先,把所有的接口放在一个统一的js文件中导出
其次,在app.js里面创建封装请求数据的方法
最后,在子页面中调用封装好了的方法来请求数据
小程序传值的方法
navigator组件或wx.navigator;
本地存储;
app.js中的全局对象;
自定义属性data-xxx;