2018-01-18

小程序基础语法

配置

  • 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" }

逻辑层

  1. js基础结构修改
    <p>
    * 增加 App 和 Page 方法,进行程序和页面的注册。
    * 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
    * 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
    * 每个页面有独立的作用域,并提供模块化能力。
    * 由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。
    * 开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。
    </p>

  2. 注册程序

    App函数用来注册一个小程序,用于初始化,接收object参数,指定小程序的生命周期函数

    属性 类型 描述 触发时机
    onLaunch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
    onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow
    onHide Function 生命周期函数--监听小程序隐藏 当小程序从前台进入后台,会触发 onHide
    onError Function 错误监听函数 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
    其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问
  3. 注册页面

    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
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,391评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • 登录getUser这个接口用不同的id和unionId去查,总是出现同一个结果。查接口,断点检查。断点显示数据是正...
    Catch_the_tail阅读 704评论 4 0
  • 6月又是一个毕业季,空气中弥漫着栀枝花的香味 永久的话题就是青春,因为每个人都会经历过年轻的岁月 初中时段记忆中接...
    遗忘的soyo阅读 320评论 0 2
  • 子惜123阅读 160评论 0 0