微信小程序商业级实战

1、微信开放能力：微信支付、微信登录、二维码生成、分享

 2、http://www.7yue.pro/

3、flex的一个特性

只要父元素设定了display:flex，子元素就是失去块元素属性

举个例子：

<view>
    <view class="chunck t1">t1</view>
    <view class="chunck t2">t2</view>
    <view class="chunck t3">t3</view>
</view>

效果：

父元素加了display:flex

.container{
    display: flex;
}

<view class="container">
    <view class="chunck t1">t1</view>
    <view class="chunck t2">t2</view>
    <view class="chunck t3">t3</view>
</view>

4、微信小程序里的绝对路径和相对路径

新建一个组件，将其引入

{
  "usingComponents": {
    "v-like": "components/like/index"
  }
}

<view class="container">
    <v-like></v-like>
</view>

这时会报错

 

原因：这时使用的是相对路径，引入的组件是相对于classic的

解决办法：

第一种：

{
  "usingComponents": {
    "v-like": "../../components/like/index"
  }
}

找到正确的路径

第二种：使用绝对路径

{
  "usingComponents": {
    "v-like": "/components/like/index"
  }
}

这俩种都可以，看自己喜欢哪个

5、const不能改变，说的是内存地址不能改变

const config = {
  name: 'zb'
}

config = 2 // 报错

config.name = 'zb1' // 没有报错

修改config里的属性值不会报错，因为没有改变内存地址

但是赋值为2，修改了内存地址，所以报错

 6、自定义事件   https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

this.triggerEvent('myevent', myEventDetail, myEventOption)

使用triggerEvent定义

myevent是事件名

myEventDetail 是属性

例子：

 // 激活
      let behavior = this.properties.like?'like':'cancel'
      this.triggerEvent('like',{
        behavior: behavior
      })


  <v-like bind:like="onLike" like="{{classic.like_status}}" count="{{classic.fav_nums}}"></v-like>

onLike:function(event) {
  console.log(event)
},

自定义事件时传入的参数，会出现在detail中

自定义的组件把事件一层一层传递，直到page

7、组件的生命周期  https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

要想输出定义的properties和data里的属性，可以在attached里输出

8、不要在属性的observer里面操作这个属性

这是错误的，会报下面的错误

 9、

align-items: baseline;

保证元素基于底部对齐

 10、纯粹回调、Promise与async、await

纯粹callback回调：回调地狱  return 只是一种代码风格 看着复杂 不代表不能实现功能

promise：代码风格比纯粹的callback好  多个异步等待合并 promise也可以传递callback，但是不需要层层传递callback，因为promise没有剥夺函数的return能力

最佳的异步处理方案async、await ： ES2017提出的  小程序不支持 

Promise是一个对象，而不是函数

因为在面向对象思想里，对象是可以保存状态的，而函数不可以保存（闭包函数可以保存）

promise的精髓是用对象的形式保存了异步调用的结果

promise作为一个对象，是可以赋值给一个变量的，而且这个变量可以在我们的代码中到处传递，不需要附带任何的回调函数。只有在需要的时候才要传入回调函数

const promise = new Promise((resolve, reject) => {
      wx.getSystemInfo({
        success:(res) => {
          resolve(res)
        },
        fail: (error) => [
          reject(error)
        ]
      })
    })
    promise.then((res) => {
      console.log(res)
    },(error) => {
      console.log(error)
    })

 11.、我们使用flex布局的时候，会出现各种奇怪的问题，原因就是因为没有设置宽度和高度，所以我们最好给用到的div设置宽为100%

12、真机预览小程序：点击微信开发工具的预览按钮，扫描生成的二维码。如果要请求后端的接口，就在手机上点击右上角的三个点，点击打开调试，然后重新打开小程序

13、behaviors 类似于vuex中的mixins 把多个组件都用到的属性和方法抽取出来放到这个文件里

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html

Behavior文件

let classicBeh = Behavior({
  properties: {
    img: {
      type: String
    },
    content: {
      type: String
    }
  },
  data: {

  },
  methods: {

  }
})

export { classicBeh }

import { classicBeh } from '../classic-beh'

Component({

  behaviors: [classicBeh],

  /**
   * 组件的属性列表
   */
  properties: {
  },

备注：

    1、一个组件可以引入多个behavios文件

    2、如果多个behavios文件里有相同的properties和data，取最后一个behavios文件里的

    3、如果组件里有相同的properties和data，组件里的覆盖behavios文件里的

    4、如果组件和properties文件里都有attached，按次序执行

14、在使用缓存的时候，可能会出现很多奇怪的问题，有可能是缓存引起的，就算是重新编译或者重启微信开发工具也不行，这时候就要清除缓存

15、使用@import引入样式文件

16、https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html#wx:if vs hidden

如何让自定义组件支持hidden

我们在自定义组件上直接写hiddern=""是没有效果的

但是在<view>上写却可以

所以我们可以把hidden传递给自定义组件，在自定义组件的<view>上写hiddern=""

wx;if true或false的时候，会执行完整的生命周期，消耗资源多

hidden 只会显示和隐藏  初始化以后不会再执行完整的生命周期

hidden的一个特点：不能触发组件生命周期的detached

17、微信小程序的音乐API    BackgroundAudioManager 

使用实例

const mMgr = wx.getBackgroundAudioManager()

mMgr.src = this.properties.src // 设置src 自动播放
mMgr.title = this.properties.title //必须

 切换组件的时候，停止音乐播放

解决方案一：

       在组件的detached生命周期中调用  mMgr.stop()

       这种方法有个问题：只要一切换音乐播放就会停止

解决方案二：

       通过判断当前播放的src和当前组件传进来的src，如果一致：按钮为暂停按钮，反之为播放按钮

        

if (mMgr.src === this.properties.src) {
        this.setData({
          playing: true
        })
      }

 18、promise的正确用法

我们调用promise方法以后，如果要继续调用其他的promise方法，一般这样写

bookModel.getHotList()
      .then(res => {
        console.log(res)
        bookModel.getMyBookCount()
          .then((res) => {
            console.log(res)
            bookModel.getMyBookCount()
              .then(res => {
                console.log(res)
              })
          })
      })

上面这种方法不好，类似于回调地狱

推荐使用下面的方法

bookModel.getHotList()
      .then(res => {
        console.log(res)
        return bookModel.getMyBookCount()
      })
      .then(res => {
        console.log(res)
        return bookModel.getMyBookCount()
      })
      .then(res => {
        console.log(res)
      })

调用promise方法后返回出去，这样就可以使用then进行下一个操作

 19、从别的页面跳转到相应页面，url中携带的参数，都在生命周期onLoad里的options中

20、微信小程序中的slot https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#组件wxml的slot

<!-- 组件模板  slot使用name进行区分 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

备注：如果要使用slot，一定要在定义slot的组件js页面假如

options: {
    multipleSlots: true // 在组件定义时的选项中启用slot支持
  },

文档里说的是多slot的时候需要加这个，测试中发现，一个或多个都需要用slot

 21、微信小程序可以从父组件传递自定义的样式  

外部样式类

/* 组件 custom-component.js */
Component({
  externalClasses: ['my-class']
})

<!-- 组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

 22、wxs 语法类似于es5语法  定义以后  可以在wxml中使用

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html

 23、input组件有个特殊的方法 bindconfirm   用键盘输入完成后会触发

24、编程思想：有些数据能前端处理的，就不要麻烦后端

25、微信小程序分为逻辑层和视图层，数据从逻辑层发送到视图层，需要用到setData

       这需要消耗资源，如果视图层用不到的话，可以使用this.data改变data里定义的值

26、open-data和getUserInfo的区别

      都可以获取用户信息

       open-data 不需要授权，直接展示用户信息  如果只是为了展示信息  可以用open-data

       getUserInfo 需要授权，可以通过Js获取用户信息

27、授权组件

      https://developers.weixin.qq.com/miniprogram/dev/component/button.html

<!--button原生组件,open-type需要设置为getUserInfo，getuserinfo方法用来获取用户信息-->
<button
  bind:getuserinfo="onGetUserInfo"
  open-type="{{openType}}"
  plain="{{true}}" // 按钮是否镂空，背景透明
  class="container"
>
  <slot name="img"></slot>
</button>

 需要从父组件传递的属性时openType

父组件使用

josn引入 
"usingComponents": {
    "v-button": "/components/image-button/index"
  }


<v-button
    wx:if="{{!authorized}}"
    bind:getuserinfo="onGetUserInfo"
    open-type="getUserInfo"  // 表示传给v-button的值是open-type
    class="avatar-position"
  >
    <image slot="img" class="avatar" src="/images/my/my.png" />
  </v-button>

 28、微信小程序中跳转另一个小程序

俩种方式：

   使用wx.navigateToMiniProgram

wx.navigateToMiniProgram({
      appId: 'xxxxxxxxxxxxxxxxxx', // 要跳转的小程序的appid
      path: 'page/index/index', // 跳转的目标页面
      extarData: {
        open: 'auth'
      },
      success(res) {
        // 打开成功  
      }
})

使用navigator组件

<navigator class="nav" target="miniProgram" app-id="wx8ffc97ad5bcccc89" open-type="navigate">
  <image class="vendor" src="/images/my/vendor.png"></image>
</navigator>

注意：从小程序A内跳转到小程序B内有一个前提条件：A和B必须被同一个公众号关联

29、分享功能  https://developers.weixin.qq.com/miniprogram/dev/component/button.html

<button
  open-type="share"
>
  分享
</button>

可以使用button组件完成分享功能，open-type设置为share

<button
open-type="share"
>
分享
</button>