微信小程序 （总结）

opacity: 0.3; 透明度；

margin:auto=margin:auto auto auto auto

表示上下左右都为auto；margin:0 auto=margin:0 auto 0 auto，表示上下为0，左右为auto；margin:auto表示横竖都居中，margin: 0 auto表示横居中，竖不居中；

margin后面一般会跟4个参数，如margin:1px、1px、1px、1px，分别表示上外边距为1px、右外边距为1px、下外边距为1px、左外边距为1px。

如果后面只写2个参数的话，如margin：1px、2px，则表示上下外边距为都为1px，左右外边距都为2px。

display: flex; flex-direction: row;

行内一排 view

border:1px solid #0e8352;

边界线 宽度 颜色

height line-height

height 视图框高度 line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了

bindchange

eventhandle value 改变时触发 change 事件

模板template

一、定义模板

1、新建一个template文件夹用来管理项目中所有的模板；
2、新建一个courseList.wxml文件来定义模板；
3、使用name属性，作为模板的名字。然后在

注意：
a.可以看到一个.wxml文件中可以定义多个模板，只需要通过name来区分；
b.模板中的数据都是展开之后的属性。

二、使用模板

1、使用 is 属性，声明需要的使用的模板
2、将模板所需要的 data 传入，一般我们都会使用列表渲染。

注意：
a.可以通过表达式来确定使用哪个模板is="{{index%2 === 0 ? ‘courseLeft’ : ‘courseRight’}}"
或者通过wx:if来确定。index是数组当前项的下标。
b. data 是要模板渲染的数据，data="{{…item}}" 写法是ES6的写法，item是wx:for当前项，… 是展开运算符，在模板中不需要再{{item.courseName}} 而是直接{{courseName}} 。

三、模板样式

1、在新建模板的时候同时新建一个courseList.wxss 的文件，与CSS同样的写法控制样式。
2、在需要使用模板的页面 .wxss文件中import进来；或者直接在app.wxss中引入，这样只需要一次引入，其他文件就不用引入了。
@import url("…/template/courseList.wxss");

小程序全局共享数据

// app.js
App({
  globalData: 'I am global data' // 全局共享数据
})
// 其他页面脚本other.js
var appInstance = getApp()
console.log(appInstance.globalData) // 输出: I am global data

获取小程序用户信息

云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 openid，开发者无需校验 openid 的正确性，因为微信已经完成了这部分鉴权，开发者可以直接使用该 openid。与 openid 一起同时注入云函数的还有小程序的 appid。

从小程序端调用云函数时，开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文（appid、openid 等），无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态（openid）。可以写这么一个云函数进行测试：

// index.js
const cloud = require('wx-server-sdk')
exports.main = (event, context) => {
  // 这里获取到的 openId、 appId 和 unionId 是可信的，注意 unionId 仅在满足 unionId 获取条件时返回
  let { OPENID, APPID, UNIONID } = cloud.getWXContext()

  return {
    OPENID,
    APPID,
    UNIONID,
  }
}

云函数的传入参数有两个

一个是 event 对象，一个是 context 对象。event 指的是触发云函数的事件，当小程序端调用云函数时，event 就是小程序端调用云函数时传入的参数，外加后端自动注入的小程序用户的 openid 和小程序的 appid。context 对象包含了此处调用的调用信息和运行状态，可以用它来了解服务运行的情况。在模板中也默认 require 了 wx-server-sdk

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

调用
wx.cloud.callFunction({
  // 云函数名称
  name: 'add',
  // 传给云函数的参数
  data: {
    a: 1,
    b: 2,
  },
  success: function(res) {
    console.log(res.result.sum) // 3
  },
  fail: console.error
})

wx:for="{{diary}}" 双引号之间绝对不能有空格

template 模板使用

{{content.content}} {{content.description}} {{content.description}}

一、bindtap事件

在wxml文件里绑定：

 <view class='wel-list' bindtap='TZdown'>
    <image src="/images/welcome_08.png"></image>
    <text>C语言资料下载</text>
  </view>

在js文件里相应：

Page({
  TZdown: function () {
    wx.navigateTo({
      url: '../download/download'
    });
  }
})

二、bindinput事件

wxml文件：

<input type="number" placeholder="请输入手机号" class="inp-holder" maxlength="11" bindinput="getPhone" />
<input type="number" placeholder="请输入验证码" class="inp-holder" maxlength="6" bindinput="getCode" />

js文件：

    // 拿到手机号
    getPhone: function (e) {
        var val = e.detail.value;
        this.setData({
            telphone: val
        });
    },   

     // 拿到验证码
    getCode: function (e) {
        var val = e.detail.value;
        this.setData({
            code: val
        });
    },

图片文件名中不可以有空格 冒号 否则不可访问

button 文字居中

flex-direction(改变轴线方向): row(水平轴线，默认) column(垂直轴线) //这里讲的是比较常用的布局

(轴线举例：父级元素使用flex布局，默认布局下块级元素是会换行的，但设置了flex布局后默认就都水平排列了)

justify-content: flex-start(居于轴线的开头) center(居于轴线的中间) flex-end(居于轴线的末端) space-around(将子元素按比例排列在轴线上) space-between(将子元素排列在轴线两端)

align-items: 同justify-content

flex-wrap(规定子元素溢出处理): nowrap(不换行) wrap(顺序换行) wrap-reverse(逆序换行)

页面跳转

tab 页

wx.switchTab({

url: ‘…/future/future’,

})

非tab 页

wx.navigateTo({

​ url: ‘…/userConsole/userConsole’,

​ })

Collection.orderBy / Query.orderBy 指定查询排序条件

方法签名如下：

function orderBy(fieldName: string, order: string): Collection | Query

方法接受一个必填字符串参数 fieldName 用于定义需要排序的字段，一个字符串参数 order 定义排序顺序。order 只能取 asc 或 desc。

如果需要对嵌套字段排序，需要用 “点表示法” 连接嵌套字段，比如 style.color 表示字段 style 里的嵌套字段 color。

同时也支持按多个字段排序，多次调用 orderBy 即可，多字段排序时的顺序会按照 orderBy 调用顺序先后对多个字段排序

示例代码：按一个字段排序

按进度排升序取待办事项

const db = wx.cloud.database()
db.collection('todos').orderBy('progress', 'asc')
  .get()
  .then(console.log)
  .catch(console.error)

示例代码：按多个字段排序

先按 progress 排降序（progress 越大越靠前）、再按 description 排升序（字母序越前越靠前）取待办事项：

const db = wx.cloud.database()
db.collection('todos')
  .orderBy('progress', 'desc')
  .orderBy('description', 'asc')
  .get()
  .then(console.log)
  .catch(console.error)

wx.showLoading(Object object) 加载中

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

参数

Object object

属性	类型	默认值	必填	说明
title	string		是	提示的内容
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)