原生微信小程序入门知识梳理1 - 生命周期 - 模板语法 - 事件

前言：记录学习原生微信小程序语法
个人博客 已更新该文章— 原生微信小程序入门知识梳理1

---

开始

注册小程序账号 填写相关信息之后

1. 设置 - 基本设置 -账号信息中 找到专属的AppID(小程序ID)
2. 开发工具 - 开发者工具中 下载微信开发者工具
3. 创建项目 - appID 中填写属于自己的appID
   

---

微信小程序项目结构

文件	必需	作用
app.js	是	小程序的逻辑文件
app.json	是	小程序的公共配置文件
app.wxss	否	小程序的公共样式文件

pages文件

文件	必需	作用
xxx.js	是	页面逻辑文件
xxx.wxml	是	页面html结构文件
xxx.json	否	页面配置文件
xxx.wxss	否	页面样式文件

配置（全局 && 页面）

• 根目录下的 app.json 文件用来对微信小程序进行全局配置
  例 “pages”: [ “pages/index/index” ] 页面路径列表
• pages目录下的 xxx.json 文件用来对微信小程序页面进行页面配置
  例 navigationBarTitleText 导航栏标题文字内容

生命周期（小程序生命周期 && 页面生命周期）

小程序生命周期
// app.js 
App({
  onLaunch (options) {
    // 小程序初始化 只有销毁进入 或者 第一次进入小程序 触发
  },
  onShow (options) {
    // 小程序在前台，显示触发
  },
  onHide () {
    // 小程序在后台，隐藏触发
  },
  onError (msg) {
    console.log(msg) //小程序报错
  },
   存储小程序全局数据
  globalData: 'I am global data'
})

// xxx.js   页面获取 全局存储数据
const app= getApp()
console.log(app.globalData) // 小程序全局数据

---

// index.js
Page({
    data: {
        msg: 1111,
        list: [
            { id: 1, name: '第一个', flag: true },
            { id: 2, name: '第二个', flag: true },
            { id: 3, name: '第三个', flag: false },
        ],
        arr: [
            { title: '我的arr' },
            { title: '我的arr2' },
        ]
    },
    onLoad: function (options) {
        // 页面创建时执行
    },
    onShow: function () {
        // 页面出现在前台时执行
        // 使用页面全局存储实例  getApp() 
        const appInstance = getApp()
        console.log(appInstance.globalData) // I am global data
    },
    onReady: function () {
        // 页面首次渲染完毕时执行
        console.log(this.data.msg);
        setTimeout(() => {
        	//设置页面数据
            this.setData({
                msg: '数字变GG'
            })
        }, 2000)
    },
    onHide: function () {
        // 页面从前台变为后台时执行
    },
    onUnload: function () {
        // 页面销毁时执行
    },
	事件函数
    tapName(e) {
        console.log(e);
    }
})

模板语法

<!-- index.wxml -->
<view class="container">
  首页 {{msg}}
  //循环
  <view wx:for="{{list}}" wx:key="index">
    <view wx:if="{{item.flag}}">{{item.name}}</view>
    <view wx:for="{{arr}}" wx:for-item="res" wx:for-index="i" wx:key="i">{{res.title}}</view>
  </view>

	//事件函数
  <button  bindtap="tapName" data-neme='111'>点我</button>
</view>

事件

绑定一个事件处理函数。
如bindtap，当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。
传参方式 data-xxx='' 事件处理bindxxx
事件分类冒泡事件和非冒泡事件：

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
• 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

//xxx.wxml
<button  bindtap="tapName" data-neme='111'>点我</button>

//xxx.js
Page({
  tapName: function(event) {
    console.log(event)
  }
})

总结

原生小程序语法还是比较简单的，有一定框架基础，很快就能理解，进度持续更新中