微信小程序

一、背景

有空介绍

二、事件方法使用

1、循环方法       wx:for="{{ searchList }}"           v-for="(item, index) in searchList"

2、最小量更新    wx:key="index"                        :key="index"

3、点击事件       bindtap="handleSearch"           @click="handleSearch"

4、获取事件回调data-item="{{item}}"                       @click="handelSearch(event)"

微信小程序WXML页面组件的data-xx 的使用_微信小程序data-id_billykan的博客-CSDN博客

5、防止冒泡事件catchtap="handleClear"            .stop修饰符

不会冒泡到父元素上，阻止事件冒泡

bindtap和catchtap的区别_柠檬不萌只是酸i的博客-CSDN博客

6、条件判断       wx:if="{{ isShowFlag }}"           v-if="isShowFlag"

7、样式判断       hidden="{{ isShowStyle }}"         v-show="isShowStyle"

url: 条件渲染 | 微信开放文档

8、动态类名添加     

class="wrapper {{ flag ? "currnet" : "none"}}"    :class="{flag ? 'current' : 'none'}"

9、动态样式添加

style="dispaly: {{ flag }}"                       :style="{display : flag ? 'inline' : 'block'}"

10、给data赋值

this.setData({

        searchList: res?.records || []

})

    {{item.content}}
    
    
    
    

// hidden使用

// 动态图片


this.setData({
    searchList: res?.records || []
})

三、app.js的作用

 app.js是整个小程序项目的入口文件，如果小程序要运行，第一个被执行的文件就是app.js，第一个被执行的代码是app.js中的onLaunch生命周期。在app.js中可以书写小程序的全局业务逻辑，在app.js里面，写上一些需要的东西，如globalData，在其他页面需要时，可以直接调用，无需一直写。

// app.js
App({
  onLaunch() {
    const that = this;
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏高度 + 44
    that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
    that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
    that.globalData.menuTop= menuButtonInfo.top;
    that.globalData.menuHeight = menuButtonInfo.height;
    
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },

  globalData: {
    userInfo: null,
    // 数据都是根据当前机型进行计算，这样的方式兼容大部分机器
    navBarHeight: 0, // 导航栏高度
    menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
    menuTop: 0, // 胶囊距顶部间距
    menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
  }
})

普通页面引入app.js

const app = getApp(); //  获取小程序实例
Page({
  /**
   * 页面的初始数据
   */
  data: {
    menuTop: app.globalData.menuTop,  //  获取小程序顶部距离，适配各种手机型号对齐右上角胶囊导航栏
    menuHeight: app.globalData.menuHeight,  //  获取小程序胶囊高度
    forUser: ''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      forUser: options.forUser
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  async onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
})

四、生命周期

小程序生命周期(onLaunch、onShow、onHide、onReady、onLoad、onUnload)

1、onload：页面加载时执行，只执行一次；
2、onshow：页面展示时执行，执行多次；
3、onReady：页面初次渲染时执行，只执行一次；
4、onHide：页面从前台进入后台时执行；
5、onUnload：页面卸载时执行；

五、页面跳转

路由跳转及其获取方式：

// 普通页面跳转及传参
wx.navigateTo({
    url: '/pages/subpages/pages/contentResult/contentResult?forUser=' + 123456
})
// tab页面跳转 - 禁止传参
wx.switchTab({
    url: '/pages/home/home',
});
// 返回前一页
wx.navigateBack();

①普通跳转其他页面（保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。）

wx.navigateTo(Object object) | 微信开放文档

②跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.switchTab(Object object) | 微信开放文档

③关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

wx.navigateBack(Object object) | 微信开放文档

六、分包

• 整个小程序所有分包体积不能大于16M（主包+分包）
• 单个分包/主包大小不能超过2M

七、自定义组件（publicTitle、dialog)

八、封装http请求（微信一键登录）

九、tabBar配置 （动态tabBar）