微信小程序技术分享

小程序是什么？

横轴=需求刚性，纵轴=需求频次，象限=需求类别

象限1：高频、刚需，小程序不适用于高频、刚需的需求场景，该场景下应采用原生App
象限2：高频、非刚需，游戏，视频等要求很高的交互、视觉体验和沉浸感，建议采用原生App；日常工具类产品，
在功能和性能满足的前提下，基于开发成本和使用成本，建议采用小程序
象限3：低频、非刚需，属于小众专业度很强的需求，不建议使用
象限4：低频、刚需，小程序非常适用于低频、刚需的长尾生活服务需求

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

紧接着通过配置 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 .wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

image

通过setData传递数据来刷新绑定的视图，不支持双向绑定

//.js
Page({
  data: {
    imgSrc: "http://www.google.cn/xxx.jpg",
  }
})

//.wxml

//.js
Page({  
 data:{  
    items: [  
        { message: 'Foo' },  
        { message: 'Bar' }  
    ]  
  }  
})  

//.wxml
{{itemValue.message}}

使用wx-if和hidden控制元素的显示和隐藏

大标题

//.wxml


//.js
Page({
  data: {
  },
  noWork:function (e) {
    console.log(e.currentTarget.dataset.tag1);
  }
})