微信小程序入门

1.项目结构：

1.1如图

1.2. app.js结构：

//app.js
App({
 //小程序生命周期函数
  onLaunch: function () {

  },
  //全局变量
  globalData: {
    userInfo: null
  }
})

 app.js中最外层为App({})， 方面需要一个对象，对象中有小程序生命周期函数、全局自定义函数、以及全局变量

1.3 index.js结构（页面js结构）：

//index.js
//获取应用实例
const app = getApp()

Page({
  //页面局部变量
  data: {
    motto: 'Hello World',
  },
  //事件处理函数
  bindViewTap: function() {
  
  },
  //页面周期函数
  onLoad: function () {
   
  }
})

 2. 事件：

2.1定义

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches

2.2 特征（小程序中bind开头，html中on开头）：

点击事件：bindtap,相当于onclick

3.生命周期函数，分小程序生命周期和页面生命周期函数：

3.1 小程序生命周期函数定义在app.js中，

如： onLaunch: function(){}

3.2同时里面还可以定义全局变量，在其他页面js中通过如下方式获取全局变量:

// other.js
const app = getApp()
console.log(app.globalData) // I am global data

 

3.3 小程序生命周期函数详情：https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

3.4 页面生命周期函数：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

4 组件（html标签）

https://developers.weixin.qq.com/miniprogram/dev/component/view.html

5. 逻辑层将数据渲染到视图层

MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/index.html

6.事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

7.api(相当于js提供的一些原生方法)

https://developers.weixin.qq.com/miniprogram/dev/api/index.html

8.模块化，抽取公共方法或变量放到公共的js中，其他js引入：

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html