小程序基础语法
配置
app.json中的pages数组第一项为默认首页
-
window模块包含属性
`
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "C'est la vie",
"navigationBarTextStyle":"black",
"backgroundColor":"red",
"enablePullDownRefresh":"false",
"onReachBottomDistance":"20px"`
-
tabBar标签栏
attr type bool describe color HexColor 是 tab 上的文字默认颜色 selectedColor HexColor 是 tab 上的文字选中时的颜色 backgroundColor HexColor 是 tab 的背景色 borderStyle String 否 black tabbar上边框的颜色, 仅支持 black/white list Array 是 tab 的列表,详见 list 属性说明,最少2个、最多5个 tab position String 否 bottom 可选值 bottom、top -
pages.json 覆盖全局配置
attr type bool describe navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000" navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white navigationBarTitleText String C'est la vie 导航栏标题文字内容 backgroundColor HexColor #ffffff 窗口的背景色 backgroundTextStyle String dark 下拉背景字体、loading 图的样式,仅支持 dark/light enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数。 disableScroll Boolean false 设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项 onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px DEMO
{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }
逻辑层
js基础结构修改
<p>
* 增加 App 和 Page 方法,进行程序和页面的注册。
* 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
* 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
* 每个页面有独立的作用域,并提供模块化能力。
* 由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。
* 开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。
</p>-
注册程序
App函数用来注册一个小程序,用于初始化,接收object参数,指定小程序的生命周期函数
属性 类型 描述 触发时机 onLaunch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow onHide Function 生命周期函数--监听小程序隐藏 当小程序从前台进入后台,会触发 onHide onError Function 错误监听函数 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息 其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问 -
注册页面
Page函数注册一个页面,接收一个object参数,指定页面的初始数据,生命周期函数,事件处理函数
属性 类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面初次渲染完成 onShow Function 生命周期函数--监听页面显示 onHide Function 生命周期函数--监听页面隐藏 onUnload Function 生命周期函数--监听页面卸载 onPullDownRefresh Function 页面相关事件处理函数--监听用户下拉动作 onReachBottom Function 页面上拉触底事件的处理函数 onShareAppMessage Function 用户点击右上角转发 onPageScroll Function 页面滚动触发事件的处理函数 onTabItemTap Function 当前是 tab 页时,点击 tab 时触发 其他 Any 开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问
初始化数据,必须是json格式
` <view>{{text}}</view> <view>{{array[0].msg}}</view> Page({ data: { text: 'init data', array: [{msg: '1'}, {msg: '2'}] } }) `
生命周期函数
wait
markdown 表格模板
| attr | type | bool | describe
| :--: | : -- : | :--: | : -- :
|color | HexColor | 是 | tab 上的文字默认颜色
| selectedColor | HexColor | 是 | tab 上的文字选中时的颜色
| backgroundColor | HexColor | 是 | tab 的背景色
| borderStyle | String | 否 | black tabbar上边框的颜色black/white
|list | Array | 是 | tab 的列,最少2个、最多5个 tab
|position | String | 否 | bottom 可选值 bottom、top