微信小程序学习

一. 基础

1.常见组件的使用

  <view></view>
  <text></text>
  <image></image>
  1. 使用WXML模板语法页面结构
  wx:if、wx:elif、wx:else、hidden、wx.for、wx.key 

3.样式

  rpx 尺寸单位 : 1px 等于 2rpx
  @import 样式导入、全局样式和局部样式

4.app.json 对小程序页面进行全局配置

  pages
  window: 控制导航栏 背景
  tabBar
  style

5.发起网络请求

   wx.request()

6.导航跳转

  声明式导航: 组件
  编程式组件:调用api

7.下拉刷新

  enablePullDownRefresh: 开启下拉刷新 true false
  onPullDownRefresh : 事件监听

8.上拉加载

  onReachBottomDistance: 设置上拉刷新距离
  onReachBottom: 事件监听

9.生命周期函数

  应用生命周期函数:
          onLaunch: 初始化
          onError: 错误监听函数
          onShow:  显示
          onHide:  隐藏
  页面生命周期函数:
          onLoad: 传参 首次进入
          onshow: 显示 每打开一次都会触发
          onReady: 加载完成,可以和视图层进行交互
          onHide: 隐藏 当navigateTo或底部tab切换的时候都会被调用
          onUnload: 销毁 当redirectTo或navigateBack的时候会调用

10.使用组件

  自定义组件创建在components文件下 再到该组件的JSON文件下,将该页面声明为组件  "component": true
  引入:  全局引入, 局部引入, "usingComponents": { 
    "navbar": "../../components/NavBar/NavBar"
  }
  修改组件的样式隔离选项: options --> stylelsolation(islated,apply-shared,sharted)
  1. 数据监听器
  版本支持: 2.6.1+
  只能使用在自定义组件中,在页面中是无法使用的
  observers
  '**': 每次setData都触发

12.定义纯数字字段

   options --> pureDataPattern 正则

13.组件通信

  属性绑定  properties
  事件绑定  this.triggerEvent('cancelEvent',id)  bind:cancelEvent="_cancelEvent"
  this.selectComponent('id或class选择器')

14.behaviors

    类似于mixins
    调用Behavior构造器  module.exports = Behavior({})
    引用:  const myBehavior = require('../../behaviors/my-behavior') behaviors: [myBehavior]
  1. API 的 Promise化
  插件: miniprogram-api-promise
  安装: npm install --save miniprogram-api-promise@1.0.4
  删除原有的npm目录
  点击工具--> 构建npm
  引入: import { promiseifyAll } from "miniprogram-api-promise"
  const 
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容