小程序

如何去写小程序：

小程序里的几个重要概念

应用程序：每个应用都有一个App()函数来注册一个小程序，负责整个应用的生命周期
页面：Page()函数用来注册一个页面，其中主要用来管理页面的生命周期，数据以及处理函数。(重点)

使用vue写小程序

由于小程序的一些缺陷，比如不能组件化和不能使用第三方库的原因市场上出来了一写框架来编写小程序。这些框架基于通过编译和运行时来将代码转义成小程序可识别的代码。

wepy框架

使用wepy框架你需要哪些技能？

vue的基础知识
原生小程序的api和组件
wepy的一些语法规则

编译过程

image

如何写一个wepy的页面

<script>
import wepy from 'wepy';

export default class Page extends wepy.page {
    config = {};
    components = {};

    data = {};
    methods = {};

    events = {};
    onLoad() {};
    // Other properties
}
</script>

<template>
    <view>
    </view>
</template>

<style lang="less">
/** less **/
</style>

如何写一个组件

<template>
  <view>
  </view>
</template>

<script>
import wepy from 'wepy';
export default class Component extends wepy.component {
  components = {};
  data = {};
  methods = {};

  events = {};

}
</script>

<style lang="less">
/** less **/
</style>

组件中处了不需要config配置以及页面特有的生命周期函数之外，其他属性大致相同。

组件的引用

<template>
    <child1></child1>
    <child2></child2>
</template>

<script>
    import wepy from 'wepy';
    import Child from '../components/child';

    export default class Index extends wepy.page {
        components = {
            child1: Child
            child2: Child
        };
    }
</script>

组件之间的页面传值

静态传值
静态传值只能传递常量数据，只能传递字符串类型的数据

<child title="mytitle"></child>

// child.wpy
props = {
    title: String
};

onLoad () {
    console.log(this.title); // mytitle
}

动态传值

    
    // parent.wpy

<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>

data = {
    parentTitle: 'p-title'
};


// child.wpy

props = {
    // 静态传值
    title: String,

    // 父向子单向动态传值
    syncTitle: {
        type: String,
        default: 'null'
    },

    twoWayTitle: {
        type: String,
        default: 'nothing',
        twoWay: true
    }
    };
}

使用slot插槽

组件

<view class="panel">
    <slot name="title">默认标题</slot>
    <slot name="content">默认内容</slot>
</view>

page


<panel>
    <view slot="title">新的标题</view>
    <view slot="content">
        <text>新的内容</text>
    </view>
</panel>

mpvue框架

和wepy框架类可以参考官方文档

使用react写小程序

taro是由京东开源的一个多端开发解决方案，写一处代码通过Taro编译工具将代码分别编译出可以在不同端运行的代码。采用与React一致的组件化思想，组件生命周期与react保持一致，也支持JSX语法。

几个优点：

支持第三方
支持ES规范
代码提示很好，好的太多了
支持使用redux,
小程序的一些Api的优化
使用CSS预编译器
代码报错很友好，写代码体验增加了很多

一些缺点：

不支持使用this.props.children这个特性
不能使用无状态组件
不支持通过props传入组件
不能再JSX参数中使用匿名函数

以上的缺点中都能在你编写代码的时候进行一个提示，所以编写代码简直体验好的不要不要的。

函数防抖的应用

函数防抖debounce利用闭包的特性和函数的延迟执行来防止函数在一段时间内的多次调用。

简单的实现：

function debounce(fn, time) {
  let last = null
  return function () {
    const ctx = this
    const args = arguments
    clearTimeout(last)
    last = setTimeout(() => {
      fn.apply(ctx, args)
    }, time)
  }
}

具体应用:

input输入框的onChange事件
模糊搜索的公司名称

使用异步函数

wepy.showLoading({title: '加载中', mask: true, success: function() {
      console.log('dddd')
    }})
    setTimeout(() => {
      wx.hideLoading()
    }, 200);

上面的代码中success回调并不会被执行，目前代码中的使用的都是同步函数，或者使用async 和 await来编写同步代码。可以使用wx.**的方式来代替。

小程序中遇到的坑