微信小程序学习笔记

页面跳转

//关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
  url: "/pages/"
})
//保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.navigateTo({
  url: "/pages/"
})

1
2
3
4
5
6
7
8
9

页面配置

在app.jsz中放置我们的一些通用配置例如页面路径，默认页头，通用组件等

一个页面就是以一个文件夹以及四个子文件组成分别为js/json/wxml/wxss

在这里对应着html/css/js/，json是放置一些配置等并且创建好后js和json不能为空

直接在app.json中配置路径就会自动生成对应文件

 "pages": [
    "pages/index/index",
  ],

1
2
3

组件配置

和vue相同小程序也能组件化，把组件放置在component文件下通过json文件暴露出去

{
  "component": true,
  "usingComponents":
    {
        "i-icon": "../icon/index" //组件中也能引入组件文件
    }
}

1
2
3
4
5
6
7
8

也可以在app.json中配置全局组件

 "usingComponents": {
    "r-button": "/components/button/button",
    "r-steps":"/components/steps/index",
    "r-step":"/components/step/index"
  }

1
2
3
4
5

底部tab的配置

"tabBar": {
    "color": "#38bbff",
    "selectedColor": "#ff7473",
    "list": [
      {
        "text": "Todo",
        "pagePath": "pages/todo/todo",
        "iconPath": "pulic/images/todo1.png",
        "selectedIconPath": "pulic/images/todo2.png"
      },
      {
        "text": "Home",
        "pagePath": "pages/home/home",
        "iconPath": "pulic/images/home1.png",
        "selectedIconPath": "pulic/images/home2.png"
      }
    ]
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

wx.setStorage 和 wx.getStorage

将数据存入本地缓存的方法以及取出来的方法

如何使用

wx.setStorage

save: function () {
    wx.setStorage({
      key: "okr-list", //本地缓存中指定的 key
      data: this.data.todos //需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
    })
}

1
2
3
4
5
6

wx.getStorage

从本地缓存中异步获取指定 key 的内容

wx.getStorage({
  key: 'key',
  success (res) {
    console.log(res.data)
  }
})

1
2
3
4
5
6

小程序自带转化时间戳文件

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

关于wx:key

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

什么是block？

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

wx:if 和 hidden的对比

`wx:if` vs `hidden`

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

——来源微信文档

微信模版与vue插槽

今天阅读到微信小程序文档看到模版这一块内容，感觉微信小程序的模版与vue的组件非常相似但是和vue的插槽又非常相像。接下来方式官网代码做个比较

微信：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

//使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
<template is="msgItem" data="{{...item}}"/>

1
2
3
4
5
6
7
8
9

Vue:

//组件的传值但是并不需要声明使用的模版因为它注册了组件名
<v-card-class :datas="courses" />

1
2

模版

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot>默认内容</slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

1
2
3
4
5
6
7
8
9
10
11

使用

<base-layout>
  <template v-slot:header>//对应的插槽
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

1
2
3
4
5
6
7
8
9
10
11
12

动态监听input改变

bindinput键盘输入时触发

 <input class="okr-edit-input" 
  value="{{ objective }}"
  bindinput="objectiveChangeHandle"
  ></input>

1
2
3
4

通过setData更新数据

data: {
    objective: '',
  },

  objectiveChangeHandle: function (e) {
    this.setData({ objective: e.detail.value })
  },

1
2
3
4
5
6
7

表单提交与重置

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section">
    <view class="section__title">input</view>
    <input name="input" placeholder="please input here" />
  </view>
  
  <view class="btn-area">
    <button form-type="submit">Submit</button>
    <button form-type="reset">Reset</button>
  </view>
</form>

1
2
3
4
5
6
7
8
9
10
11

formSubmit: function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function() {
    console.log('form发生了reset事件')
  }

1
2
3
4
5
6