微信小程序---初步总结（一）

微信小程序---初步总结（一）

​新年，新公司，新项目，新的起点，2020.12.10号入职新公司，同时接到交接公司内部小程序项目的任务。觉得能试试，当学习一下新的技能了。本着不怎么积极的态度，我一步一步的接触学习摸索着。路子野，有点乱，见谅。

小程序组件目录

​小程序一个page是有四个文件组成的，js，wxml，wxss和json。

index.js
index.json
index.wxml
index.wxss

​与vue2.x相比，相当于拆开了，在加上一个json文件，嗯！就是这样（-_-!）。Js方面，我感觉最大的地方在于对data中的属性赋值，在有就是生命周期，和组件的引入。对data里的属性赋值是用的setData，直接对this.data中的属性赋值的时候视图没更新，但是打印出来是有改变的，因此我理解的是来更新视图的。生命周期用的最多的就是onLoad，unLoad，onShow，意思嘛一看就明白就不多说了。onShow解决我了一个问题就是，通过navigateto跳转到下一个页面，然后back的时候当时不知道怎么触发刷新，后来看到onShow的时候明白了。

​这个json，那用处是真的多，在usingComponents里引入自定义组件，UI组件等。在里面还可以设置小程序页面的头部是否自定义，就是这个东西"navigationStyle": "custom"。还有阻止页面滑动，这个滑动我是真的没明白，感觉除了view的那一层外，页面的里面还有一层，解决了我在iphone端滑动不了视图的问题（好生奇怪），之后滑不动的问题我都给加这个了。

{
  "usingComponents": {
    "i-index": "../../../utils/iview/dist/index/index",
    "i-index-item": "../../../utils/iview/dist/index-item/index",
    "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
    "van-dropdown-item": "@vant/weapp/dropdown-item/index",
    "van-index-bar": "@vant/weapp/index-bar/index",
    "van-index-anchor": "@vant/weapp/index-anchor/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-search": "@vant/weapp/search/index",
    "van-icon": "@vant/weapp/icon/index",
    "mp-loading": "/miniprogram_npm/weui-miniprogram/loading/loading",
    "mp-navigation-bar": "/miniprogram_npm/weui-miniprogram/navigation-bar/navigation-bar"
  },
  "navigationStyle": "custom",
  "disableScroll":true
}

​关于这个wxss，我是没啥好说的，半路接手的项目用的是原生，没有用less和scss什么的，暂时只是写写样式，flex，一路flex，怎么开心怎么flex。

小程序赋值的方法:

data: {
	filterValue: null,
	filterArr: [a, b],
	filterObj: {
    a: ''
  },
	filter: [{a: ''}]
}
// 给filterValue赋值
function setValue(value) {
  this.setData({
    filterValue: value
  })
}
// 对filterArr下标（index）为0赋值
function setValue(value) {
  const filterArr = `filterArr[${index}]`
  this.setData({
    [filterArr]: value
  })
}
// 给filterObj的a属性赋值
function setValue(value) {
  const filterObj = `filterArr.a`
  const filterObj = `filterArr.${a}`
  this.setData({
    [filterObj]: value
  })
}
// 给filter下标为0的对象中属性为a的赋值
function setValue(value) {
  const filter = `filter[${index}].a`
  const filter = `filter[${index}].${a}`
  this.setData({
    [filterObj]: value
  })
}
// 如果数组在某个方法里被改动后，也要重新赋值一次，比如：
function setValue() {
	this.data.filter.forEach(item => {
		item.c = ''
  })
  this.setData({
		filter: this.data.filter
  })
}

​总的来说就是把’路径‘先构造出来，然后用中括号包起来，然后在setData里赋值。引用类型的属性在用this.data赋值或者操作过后，也需要通过setData赋值一次，不然视图更新不了。

小程序标签

​小程序的一个组件中的wxml不像vue2.x那样只能有以一个标签包含，所以是可以多个标签来构建页面结构的。比如下面这样

index.wxml

<navigation-bar></navigation-bar> // 小程序的头部：home，返回按钮，标题，右上角的胶囊等
<view class="header"></view>
<view class="content"></view>
<view class="bottom"></view>

​ 就目前的认识程度来，还是只是刚刚接触，并没有去好好了解官方文档，所以说的只是个人的理解。不当之处希望大佬们能指出来，让我改正。就我目前的理解来看小程序的标签跟web上的并没有特别多的区别，在我的理解，就是吧div标签换成了view标签，图片img大多用image标签来替换，span可能是用text来替换。还有很多没有接触，等之后慢慢了解在总结一下。

div ---> view
img ---> image
span --> text

小程序语法

​ 有着vue的底子，上手看小程序的代码还不是那么难以接受，大多数看看基本语法就能够跟vue进行类比，来理解和使用。类似的：

以一个列表渲染来学习基本语法，我想应该是最有效率的。

下面这段代码讲述了：wx:for wx:if wx:elif wx:else 动态绑定clss，动态设置内联样式

// 数据结构：filter: [{list: [{a: '', selected: false}]}]
<view wx:for={{filter}} wx:for-index="index" wx:key="index" wx:for-item="item">
	<block wx:if={{item.list.length}}>
  	<view wx:for="{{item.list}}" wx:for-index="idx" wx:key="idx" 2x:item="list">
    	<view calss="content {{list.selected ? 'selected' : ''}}" 
            style="padding: {{list.selected ? 10 : 0}}px"
            >{{list.a || ''}} - {{list.selected ? '哇哈哈':'哈哈哇'}}</view>
    </view>
  </block>
  <block wx:elif></block>
  <block wx:else></block>
</view>

小程序模板

​小程序引用模板，举个🌰，不太好描述。数据需要在data里传进去，但是绑定的方法不用，直接绑。引用模板我没用，我就不说了。看着好像貌似，跟引用方法似的。

<template is="{{ drink ? 'milk' : 'wator' }}" data="{{ drinkMilk,drinkWater }}" />
<template name="milk">
  <view class="ADgainai" data-cups="{{xxx}}" bind:tap="drink">
    {{ drinkMilk }}
  </view>
</template>
<template name="wator">
  <view class="nongfushanquan" data-cups="{{xxx}}" bind:tap="drink">
		{{ drinkWater }}
  </view>
</template>

​至此是我对小程序的初步认识，猪八戒尝人参果了，当然还有很多东西没有写出来，比如事件的绑定，事件传值（data-xxx），事件冒泡，事件捕获，store，父子组件传值，页面间传值，navigate，扫码，safe-area-bottom，发布和自动化测试等等。

包子一口一口的吃，豆浆一杯一杯的喝，干杯 My life。