微信小程序基本知识

1.网页后台管理功能

　　　　开发需要基本的权限以及APPID

　　　　需要微信支付，客服、插件等功能需要在后台对应开通

　　　　上传包限制2M ---》所以图片多的尽量不要直接放本地

　　　　域名：

　　　　　　更改次数限制，域名必须是https的

　　　　　　第三方插件用的时候，必须放入第三方插件对应的合法域名

　　　　小程序基本的名称等配置也在后台

2.wxml对应html标签

　　　　view===>div　　文字：text     闭合标签：image input 等必须闭合标签类似于react

　　　　<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

　　　　wxss : rpx像素单位---------布局基本弹性盒布局

3.目录结构

　　　　project.config.json：项目配置文件。

　　　　app.wxss: 全局样式配置，通用。

　　　　app.js: 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

　　　　app.json: 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

4.使用 Page 构造器注册页面

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

5.跳转页面：

　　　　wx.navigateTo, wx.redirectTo 只能打开非 tabBar 页面。

　　　　wx.switchTab 只能打开 tabBar 页面。

　　　　wx.reLaunch 可以打开任意页面。

　　　　页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。

　　　　调用页面路由带的参数可以在目标页面的onLoad中获取。

　　　　 wx.navigateBack：关闭当前页面，返回上一页面或多级页面。

6.循环和显示隐藏

　　　　wx:for="{{arr}}"----> 必须同步wx:key="{{index}}" ---->默认item和index ----多级循环重新定义item和index  wx:for-item="item1"----wx:for-index="idx"

　　　　当 wx:for 的值为字符串时，会将字符串解析成字符串数组---------》花括号和引号之间如果有空格，将最终被解析成为字符串

　　　　wx:if=""和wx:else  显示隐藏

　　　　hidden="true" 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

7.事件

　　　　除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

　　　　wx不支持alert()

　　　　修改值：this.setData({})

8.template以及import和include

　　　　import 的作用域

　　　　　　import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

　　　　　　如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>

<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

　　　　include

　　　　include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：　

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

9.页面调转传值

　　　在跳转页面onload周期中默认参数option中接收传递参数

wx.reLaunch({
  url: 'test?id=1'
})
// test
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

10.app.js中的生命周期

　　　　onLaunch 生命周期函数--监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

　　　　onShow 生命周期函数--监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShow

　　　　onHide 生命周期函数--监听小程序隐藏 当小程序从前台进入后台，会触发 onHide

　　　　onError 错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息