微信小程序开发、笔记

微信小程序入门

什么是微信小程序？

小程序可以视为只能用微信打开和浏览的网站，小程序页面本质上就是网页

微信小程序的缺点

项目体积不能超过20MB

微信小程序的优势

微信 App 的功能（比如拍照、扫描、支付等等），小程序大部分都能使用

环境搭建流程

1. 微信公众平台注册上注册开发者账号，得到APPID和APPSecret

2. 下载微信开发工具，创建项目时填写自己的APPID

小程序的WXML 标签语言

标签表示一个区块，用于跟其他区块分隔, 类似 HTML的

标签

表示一段行内文本，类似于 HTML的标签

全局配置文件:app.json

{
  "pages": [
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ff0000", //导航栏的颜色,默认黑色
    "navigationBarTextStyle": "white",   //导航栏的文字颜色,只支持黑白,默认白
    "navigationBarTitleText": "小程序 Demo"     //导航栏的文字，默认为空
  }
}

小程序样式处理

全局样式文件：顶层的app.wxss文件，里面采用 CSS 语法设置页面样式 局部样式文件：每个page对应一个单独的wxss文件 推荐布局方式：Flex 推荐长度单位：rpx【小程序自创响应式单位，任何设备宽度都是750rpx】 推荐的UI框架：WeUI【官方封装的UI框架】WeUI

WEUI框架使用

源码：https://github.com/Tencent/weui-wxss/ 在dist/style/weui.wxss文件，将源码全部复制到你的app.wxss文件的头部

  
    主操作
  
  
    正在加载
  
  
    禁止点击
  

图片标签

图片轮播

单向数据绑定

小程序的数据绑定类似VUE，也遵循MVVM设计模式，文本框直接用{{}} 在JS中定义数据

Page({
  data: {
    name: '张三'
  }
});

在WXML中使用数据

  
   {{name}}

数据遍历

Page({
  data: {
    items: ['事项 A', '事项 B', '事项 C']
  }
});

  
    {{index}}、 {{item}}
   

双向数据绑定

全局数据共享

1. 在根路径下的app.js中的gloablData对象里配置全局共享数据

App({
  globalData: {
    userInfo: {
      name:'小王'
    }
  }
})

1. 在任意一个页面中获取共享数据

Page({
  data: { 
    name: getApp().globalData.userInfo.name
  }
});

事件处理

tap：触摸后马上离开。 longpress：触摸后，超过 350ms 再离开。如果指定了该事件的回调函数并触发了该事件，tap事件将不被触发。 touchstart：触摸开始。 touchmove：触摸后移动。 touchcancel：触摸动作被打断，如来电提醒，弹窗等。 touchend：触摸结束。 同一个事件在同一个元素上面其实会触发两次：捕获阶段一次，冒泡阶段一次 capture-bind：捕获阶段触发。 capture-catch：捕获阶段触发，不再向下传播，并取消随后的冒泡阶段。 bind：冒泡阶段触发。 catch：冒泡阶段触发，并取消事件进一步向上冒泡

通常使用的是：bind+tap的组合

点击

修改与获取动态数据

buttonHandler(){
  this.data.name; //获取name属性
  this.setData({
    name:'xxx' //更新name属性
  })
}

页面跳转

跳转到应用内非 tabBar 的页面路径，保留历史记录

wx.navigateTo({
      url: '/second/second?key1=value1&key2=value2'
});

返回上一页面或多级页面

wx.navigateBack({
  delta: 2
})

跳转到 tabBar 页面(在tabBar配置的页面，要用switchTab跳转)

wx.switchTab({
  url: '/index'
})

跳转到应用内非 tabBar 的页面路径，不保留历史记录

wx.redirectTo({
  url: 'test?id=1'
})

接收参数：

onLoad(options) {
    console.log('参数：',options);
}

调用相册或相机

wx.chooseImage({
      count: 1, //最多选择几个图片
      sizeType:['compressed','original'],//压缩图、原图
      sourceType:['album','camera'],//相册、相机
      success(res){
        //获取图片临时路径
        console.log(res.tempFilePaths[0])
      }
    })

Toast提示框

wx.showToast({
  title: '操作完成',
  duration: 700
});

Modal对话框

const that = this;
wx.showModal({
  title: '操作确认',
  content: '你确认要修改吗？',
  success (res) {      
    if (res.confirm) {
      wx.showToast({
            title: '操作完成',
            duration: 700
          });
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
});

本地存储

同步：
    wx.setStorageSync(key,value)
    wx.getStorageSync(key)
异步：
    wx.setStorage({ key:"key", data:"value"})
    wx.getStorage({ key: 'key',success (res) {
                console.log(res.data)
                }
            })

网络通信

微信规定，只有后台登记过的服务器域名，才可以进行通信。不过，开发者工具允许开发时放松这个限制

小程序在正式上线时，请求的域名就一定要在开发者平台中进行配置

1. 微信公众平台

2. 开发-》开发管理-》服务器域名-》必需以https开头

3. 重启小程序工具

获取用户信息

1. 要用按钮触发

 获取头像昵称 

1. 通过getUserProfile获取

getUserProfile(e) {
  wx.getUserProfile({
    desc: '用于完善会员资料', 
    success: (res) => {
      this.setData({
        userInfo: res.userInfo,
      })
    }
  })
}

生命周期钩子函数

1. 小程序生命周期函数(在根路径的app.js中) onLaunch(): 小程序启动（执行一次） onShow(): 小程序显示 onHide(): 小程序隐藏 onError(): 小程序报错

2. 页面生命周期函数(每个页面的js中) onLoad(): 加载完成（执行一次）（负责接收页面参数） onShow(): 当前页面显示 onReady(): 渲染完成（类似vue的onmounted) onHide(): 当前页面隐藏（通过navigateTo切换到其他页面时） onUnload(): 当前页面卸载（通过redirectTo、navigateBack切换到其他页面时）

自定义组件

1. 在pages下建立空的文件夹，如：shopList

2. 点击shopList文件夹右键->新建Component,名字也叫shopList

在其他页面或组件中引入自定义组件

1. 假设在index页面引入：则找到index.json,注册要引入的组件

{
  "usingComponents": {
    "shop-list":"/pages/shopList/shopList"
  }
}

1. 在index.wxml中编写

组件通信之父传子

1. 父：

1. 子：

properties: {
  list:{
    type:Array,
    value:[]
  }
},

组件通信之子传父

1. 父：

play(e){
    console.log('==play==',e.detail)
}

1. 子：

this.triggerEvent('Woniu',"标题~")

组件的生命周期钩子函数

created

created(){
  //组件实例刚刚被创建好时(此时还不能调用 setData)
}

attached

attached(){
  //组件完全初始化完毕(绝大多数初始化工作在此执行)
}

detached

detached(){
  //组件实例被从页面节点树移除时
}