微信小程序总结

标签

view: div 块
text: span 行
image: img
block: 不渲染到html中 类似于react中<>

# image标签 mode属性
<image src="{{item}}" mode="widthFix"></image> 

# 计算轮播图高度
swiper {
  height: calc(100vw/600*324)
}

样式

基本上都是flex布局

# 沉浸式导航栏 页面json文件中设置
#  "navigationStyle": "custom"
{
  "usingComponents": {},
  "navigationStyle": "custom"
}
# data数据 
# 凡是写在data中的数据，并且html中使用的数据，必须加{{}}
<text wx:if="{{flag}}">{{msg}}</text>
 data: {
    flag: false
  },
# 小程序尽量不要使用click事件，会有200-300ms的延迟，用tap代替
<button type="primary" bindtap="btnClick">按钮</button>
# 修改data中的数据必须使用this.setData方法
 btnClick() {
    this.setData({
      num: 456
    })
  },
# 读取data中的数据
this.data.num
# 实现双向绑定
# v-model = input + value
<input type="text" placeholder="input" value="{{inputValue}}"
  bindinput="inputMethod"
  />
inputMethod(e) {
    this.setData({
      inputValue: e.detail.value
    })
  }
# 可传值的魔板
<template name="test">
<text>这是一个末班{{content}}</text>
</template>

<import src="../../template/test.wxml"></import>
<template is="test" data="{{content:num}}"></template>

# wxs文件 wx的js
<wxs src="./index.wxs" module="tools">

<wxs >
function filterNum(num) {
  return num.toFixed(2);
}
module.exports = {
  filterNum:filterNum
}


</wxs>

数据

参照react
data要用setData来实现响应式
没有methods和生命周期写同一个位置

# 自定义组件
# Page --> Component 
# json文件中声明字段"component": true
{
  "usingComponents": {},
  "component": true
}
# 使用组件
# "usingComponents"中添加key为组件的名称，value为路径 不能使用小驼峰和vue不一样，小程序没有做解析
{
  "usingComponents": {
    "my-banner": "../banner/index"
  },
  "navigationStyle": "custom"
}
# 传值 父传子
<my-banner background="{{background}}"></my-banner>
# 自定义组件接参 properties
Component({
  properties: {
    background: {
      type: Array,
      value: [] // 默认值
    }
  }
})
# 子传父
wx.triggleEvent('sonClick',参数)
父 bind:sonClick = "fatherClick" ⇒ fatherClick(arg) {console.log(arg)}
# for循环嵌套别名
# wx:for-item="alias"

# 获取值一般都是通过事件对象e
# 所以很多思路可以通过自定义属性来传值 e.target中就能获取到值
<view data-id={{item.id}}></view>
# 下拉刷新 需要在app.json的window中新增"enablePullDownRefresh": true
onPullDownRefresh: function() {
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })
  }
# 触底刷新
app.json的window中新增"onReachBottomDistance": 50
# 用户分享 onShareAppMessage 目前的API是无法知道用户是否真的分享出去了
# 解决冒泡
bindtap改成catchtap事件即可

云函数

火箭🚀
api的东西绝壁是看官方文档啊！火箭上有超链接去看，下面我只是简单举栗整理一些常用的

# database
// 数据库
const db = wx.cloud.database()
// 数据集
const todos = db.collection('todos')
# 查询语句
const todo = db.collection('todos').doc('todo-identifiant-aleatoire').get({
  success: function(res) {
    // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
    console.log(res.data)
  }
等价于 const todo = db.collection('todos').where({id:'todo-identifiant-aleatoire'}).get({
  success: function(res) {
    // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
    console.log(res.data)
  }
# 插入 data必须要
// 插入一条数据
  db.collection('todos').add({data: {xx:xxx}})
# 删除
  db.collection('todos').remove
# 更新数据
  db.collection('todos').where({xx:xxx}).update({data: {xx:xxx}})
# 云端上传文件
	wx.chooseImage({
      success (res) {
        const tempFilePaths = res.tempFilePaths
        wx.cloud.uploadFile({
          cloudPath: 'example.png',
          filePath: tempFilePaths[0], // 文件路径
          success: res => {
            // get resource ID
            console.log(res.fileID)
          },
          fail: err => {
            // handle error
          }
        })
      }
    })
# 云函数一般都是用于云存储操作
// 配置云函数
project.config.js中声明字段，成功后文件夹会变成黄色，并拥有了当前的环境
"cloudfunctionRoot":"路径"
// 新建云函数
右键新建nodejs云函数即可
调用云函数
wx.cloud.callFunction({
name:xxx
]).then(res=> {console.log(res)})
// 云函数传参
wx.cloud.callFunction({
name:xxx,
data: {xx:xxx}
]).then(res=> {console.log(res)})

UNI-APP

# h5不要头部栏设置
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"h5":{
					"titleNView": false
				}
			}
		}
	],
# 引入iconfont down下来的文件前面加 ~@/路径
@font-face {font-family: "iconfont";
  src: url('~@/iconfonts/iconfont.eot?t=1598233615452'); /* IE9 */
  src: url('~@/iconfonts/iconfont.eot?t=1598233615452#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAScAAsAAAAACPQAAARPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqFBIQ5ATYCJAMUCwwABCAFhG0HVRvSB8geg207eRxWkXSS1lL/EXw/1vZ9uTtMGyTRSPfpJBFJhERjSNASlU6odA8dpnKzBapJXVJTR04MCWmKh1Q8VMzO3OF1Iva8oQj5Dy6nvxoa2DzLcllz0poYYBxQYHvzAinQAkqUG8ZuIg/yPIF2owLRVrMLmcBAAaYF4hbHuMAgYVQqaKGlaRSsLeIZVK30SL8DgCfv+/ELwsOApGZg7tp5lgCkfhh/vMygtJRdigDRcHYom8iYAxTirtB5ixEk5zC0W7/TsQho15KkD+P3lh99Pl7WarGlG1K3wz88iiwJogEoOwXSoqIcnAgLI5UlzyHz5aOXeNVlXnwtykrXtKOJNwBiGAD1mKeK477hUKaFtaG9b+PTpyzqCXNHn79aTdNoOP1Pk85rGvusXKZt2F6TcL/t9Jx/0NSWmUlr1nImtKT236WG+iaoSbjLedAmdfaVJ8jGp1nXNR7wtC3H/sQTkOAVVoqPPVI9jum/a183Zg3P3JFkYi6q/T6sGH9Aft972x59SD1QqtR9T6in/Zrl1Jk+f/YTqE8NqCoNtf/pHoBisnY2zp3zZrPnTnlvOWHH5Pj0VjMb7VnMmUX7ndd9OKyt8Nb7HDZn93q/y3ATfXg3rRs79e5EqypRRXi+DaN1p3Ob6IHZSFsbfgEQsbTWaONzOyznV1yarvFNTCk5XaDUpdaSRd7lNkvr26KRrNPaMrcgw9uWdwyzAW/TINO/LT81dUNRsYNDUdHGtGiT6g3FmpioMPdN9YWKizcUDhp5LmeVMeXudq253Y6/TeW22kYYUpkG9niiTeGal4xQYtjXpmikRi6YOrSssWEfUu6n+/wMsY8Ip23YwIzDMusjli2LbOjmeYwX6rsb9PeMaMjE4io2bDQDqQk8lHVq4kYeX+1VjfQfqz2/IbTYQZA0uXzj24FD+trowcuZF2/fr/jCybZRcHRSjd7P3LF4AeoA/P/Luxkw5Ff6f3Xyj9xD12r//hXdfP+vXKftZQ5ba5r4rwUX8I4nmXrSZkovXKWx6M/QF1oFUmpLgKkWswnzG40QqG4wOHfiJ2j6H7z9ng+jHbrX6dAyFEHSNGLPWraIRwtpDqoO89DQsgDtZuVs7jCAwBClDTM6OQi99kPS7RWyXnfRQnoG1bBv0NAbDGi3HpZ7dpgIHMogUC6JChBePYLzZVIhspCQn1+OYtViLhGXeHQ2SijxCBIWHJrO5KBSlBhigbIGCydJISIkZBIkm7sMFYtliJyQVaF8MriSJOXxISHCoicF82USAFlBQHGRUAIInnoIHJ+MlJB2J0GZz5dDYaqJcREVbS1uNhRBCe8fESZYaAM0Rylt1HYpg5VqYMKRSEJxkhBBRgKRzdtRYpiUQciLR1VB8ZGCVXaIy8ULEToJmyqDp1dL7nEPtAO3qJEiR4kaDfUIr8OlcGhomIAr5VeiQeF6SpRLBHEjvkwsPmb+CQWCeAAAAA==') format('woff2'),
  url('~@/iconfonts/iconfont.woff?t=1598233615452') format('woff'),
  url('~@/iconfonts/iconfont.ttf?t=1598233615452') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/iconfonts/iconfont.svg?t=1598233615452#iconfont') format('svg'); /* iOS 4.1- */
# 文件中引入
@import url('../../iconfonts/iconfont.css');


}

SEO