Skip to content

maolovecoding/mini_program_blink

Repository files navigation

blink 项目前端

前置补充

小程序基础

懂flex布局

组件

like组件开发

rpx和px使用场景

在大部分情况下,我们都使用 rpx单位,因为rpx可以进行自适应,在屏幕尺寸和分辨率发生改变的情况下,会自动进行适应。

而px则不会进行适应。

**一般来说:**例如像字体这种,我们有时候不让其自适应。有时候我们设置 边框,border 也可能不应该自适应。

**所有的页面,小程序默认在最外层加上了page标签。**所以有些公共的样式我们可以写在app.wxss文件里面。也要注意,不是所有的公共样式都会被其他页面或者组件继承。比如我们设置的全局页面背景颜色,是不会被组件继承的。但是大部分css样式都是可以被页面继承的。

自适应弹性盒模型

设置display属性的值为 inline-flex。整体盒外模型是自适应,内部还是flex盒子。也还是蛮不错的选择。

.container{
  /* 设置弹性盒,且宽度高度还是自适应 inline-flex */
  display: inline-flex;
  flex-direction: row;
  /* 给一个内边距 */
  padding-top: 10rpx;
}

自定义触发事件

**triggerEvent()**方法

  • 参数一:自定义事件名称
  • 参数二:js对象,用来传递我们当前的数据,提供给外界的监听函数。默认在外界接收参数的detail属性下。一般也就是在event.detail
  • 参数三:触发事件的选项,对象类型。可选属性有三:
    • bubbles: 是否冒泡,默认false
    • composed: 事件是否可以穿越组件边界,为false时,事件将只能在引用组件的节点树上触发,不进入其他任何组件内部,默认false
    • capturePhase:默认false,事件是否拥有捕获阶段
选项名 类型 是否必填 默认值 描述
bubbles Boolean false 事件是否冒泡
composed Boolean false 事件是否可以穿越组件边界,为false时,事件将只能在引用组件的节点树上触发,不进入其他任何组件内部
capturePhase Boolean false 事件是否拥有捕获阶段

组件的properties属性和data属性

在定义组件的时候,我们在properties中定义的数据,是提供给外界的出口属性,一般小程序会给其我们设置属性的默认值的,当然也可以通过value属性指定默认值。而在data中定义属性的时候,如果直接将某个属性赋值为Number,String,等等,是不会给其该属性的默认值的。这些属性本来就是构造函数。

**这两个属性,在最后都会合并到一个对象中。也就是properties中和data中定义的属性,都会合并到一起的。**所以我们在定义变量的时候,这两个地方的变量不要设置为同名的变量。

properties属性定义的属性的observer属性

observer属性的类型是一个函数。在这个函数里面,不要修改属性自己的值。不然会引起无限递归。

properties: {
    // 期刊号
    index: {
      type: String,
      /**
       * 当前属性发生改变的时候,会执行该函数的内容
       * 不能在这个里面更新 index 的值 我们应该修改 _index
       * 修改index 的值会出现无限递归,因为每次修改值都会调用这个函数
       */
      observer(newVal, oldVal, changePath) {
        const val = newVal < 10 ? "0" + newVal : newVal;
        this.setData({
            // 直接无限递归了
            // index:val,
          _index: val
        })
      }
    }
  }

组件的代码复用:behavior

behavior:行为。

给多个组件定义共同的行为。

将多个组件的共性抽取出来,定义在一个单独的文件中。供多个组件一起使用。

进行代码的复用,是通过定义 Behavior来实现的。

可以把该文件认为和组件的js文件基本一致,都可以定义properties,data,methods等属性。

也可以有生命周期。

// Behavior 就是一个构造器

export default Behavior({
  properties: {
    // 图片
    img: String,
    // 内容
    content: String
  },
  data: {},
  methods: {

  }
})

组件想要使用这些定义好的行为,需要显示的继承。一个组件可以继承多个行为,就有了他们共有的属性。

Component({
  // 指定继承的behavior,可以继承多个,继承了就有了这些定义好的属性和方法等
  behaviors:[classicBeha],
})

继承的生命周期和组件内部定义的生命周期会合并。但是像属性和方法,组件内部定义了的为主,继承的属性和组件内部属性发生冲突时,以组件内部为主。多继承时,继承的属性发生冲突的时候,以最后一个聚餐的behavior为准。

注意promise方式调用get/setStorege

不管是直接传入回调函数,还是以promise来执行回调函数。返回值的data属性才是我们实际拿到的数据。res并不是。

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

css代码复用解决

@import "需要复用的wxss文件";
<!-- 别忘了后面需要分号结束 -->

背景音频管理对象wx.getBackgroundAudioManager();

小程序将背景音频相关的操作,都放到该对象中。注意:只要给该对象赋值了src属性,就会自动开始播放了。

// 背景音乐管理对象
const mgr = wx.getBackgroundAudioManager();

// 切换暂停和播放的图标
      this.setData({
        playing: !this.data.playing
      });
      if (this.data.playing) {
        // 音乐播放
        mgr.src = this.properties.musicSrc;
        mgr.title = "听雨少年!";
        console.log(this.properties.musicSrc);
      }else{
        // 音乐暂停
        mgr.pause();
      }

在现在的小程序,背景音频对象的 title属性和src属性属于必填项,不然不会生效。

image-20210907220349454

当然,如上配置出现暂停的时候,会报上面的错误。

需要在app.json中配置小程序退到后台时,也可以继续播放音频的属性。

{
    "requiredBackgroundModes": ["audio","location"],
}

申明需要后台运行的能力,类型为数组。目前支持以下项目:

  • audio: 后台音乐播放
  • location: 后台定位

wx.navigateTo(Object object)

Promise 风格 调用:支持

保留当前页面,跳转到应用内的某个页面。相当于打开的页面是子页面。

注意:跳转页面传递参数时:只能通过查询字符串进行传递。

需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'

组件插槽slot

和vue了插槽很相似。插槽就是占位使用。如果我们需要插槽的位置插入标签,组件等,就可以直接在外面插入,替换插槽。不需要则不需要传递。

<!-- 组件插槽的使用 -->
  <!-- 这是具名插槽,使用的时候也需要指定插槽的名字 -->
  <!-- 如果只有一个插槽,是可以不指定插槽的名称的,那样外面使用的时候也可以不指定插槽的名称 -->
<slot name="after"></slot>

在组件的js文件中配置插槽生效。启用插槽。

Component({
    // 需要在options属性里面 设置 multipleSlots 的值为true
  // 插槽才能起作用
  options:{
    multipleSlots:true
  }
})

插槽的使用

<!-- 插槽的使用 -->
<!-- 直接在标签上 通过slot属性指定要替换的插槽 -->
<text slot="after">{{"+" + comment.nums}}</text>
注意

对于组件插槽,发现了一个特点。

如果说,组件只有一个默认插槽,也就是插槽只有一个,而且没名字,那么,不需要再组件的js文件中设置options对象的multipleSlots属性为true。

设置这个属性为true,主要是为了开启多插槽的使用。

也就是说,只有默认插槽的情况下,不需要配置该属性的。

还有,如果将其他组件用来替换插槽,其他组件是需要在当前所在的页面的json文件中进行配置的。

组件样式

组件对应 wxss 文件的样式,只对组件wxml内的节点生效。

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */

外部样式的使用

有时,组件希望接受外部传入的样式类。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。

这个特性可以用于实现类似于 view 组件的 hover-class 属性:页面可以提供一个样式类,赋予 viewhover-class ,这个样式类本身写在页面中而非 view 组件的实现中。

注意:在同一个节点上使用普通样式类和外部样式类时,两个类的优先级是未定义的,因此最好避免这种情况。

上面这句话就是废话,说白了,就是你传递的外部样式,和我组件的默认样式如果发生冲突的时候,**而你又没有指定两个冲突样式的优先级,**那我就不确定到底使用的是哪一个样式。

因此传递外部样式的时候,建议还是指定某些不生效样式的优先级。

定义外部样式
 // 外部样式 在组件内定义好样式名,然后实际引用的样式是外部传递的
  externalClasses:["tag-class"],
组件内使用
<view class="container tag-class"></view>

感觉小程序在外部样式这一块做的不是很好。正常来说,放到后面的样式,就应该覆盖前面的样式。也就是样式发生冲突的时候,而优先级是一样的情况下,tag-class的样式就应该覆盖container的样式,不然,每次还需要强制优先级多麻烦。

页面传递外部样式给组件
<!-- 传递外部样式 -->
<m-tag tag-class="ex-tag1"/>

我们将在页面的wxss定义的样式名称,也就是class属性值,直接传递给组件内部。

text组件不要轻易换行

<text>aaaaaaaa
bbbbbb
cccccccc</text>

我们在书写内容的时候,如果因为某些原因,比如不美观等,我们敲下回车进行换行,那么,解析的时候,呈现在页面上的内容,也会因为你的回车换行而换行。

image-20210908211911799

wxs

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构

wxs的使用

  1. WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
  2. WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
  3. WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API。
  4. WXS 函数不能作为组件的事件回调。
  5. 由于运行环境的差异,在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

wxs模块

一个wxs文件,或者写在页面上的wxs标签里面的代码,就是一个单独的wxs模块。

模块

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。

使用wxs的时候,请参照js的es5标准。不要使用es6及其新特性。无法使用的。

所以我们可以用wxs来写过滤器等等。

wxs的基本使用

定义一个过滤器,来处理文本中被转义的换行符。

// 用来过滤掉 \n 解析为换行等
/**
 * wxs和js类似。但是,wxs并不是js。wxs有自己独立的运行环境。
 * @param {String} text 文本
 */
var format = function (text) { // 只能使用var定义(目前是这样),也不能使用箭头函数
  // 获取正则表达式的对象 (参照官方文档)
  if(!text) return;
  var reg = getRegExp("\\\\n","g");
  return text.replace(reg,"\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
}

module.exports.format = format;
wxs在页面的使用

我们需要导入外部定义的wxs,并指定模块名称。

<!-- 引入wxs模块 ,并使用module属性指定模块名(任意名称)-->
<wxs src="../../utils/filter.wxs" module="util" />

引入后的页面上使用,就可以通过我们定义的模块名使用我们导出的函数或者变量等。

<!-- 数据绑定的时候,这个函数会被执行两次,数据初始化一次,数据更新一次 -->
    <!-- decode 解码我们的某些特殊字符 -->
    <!-- decode可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; -->
    <text decode="{{true}}" class="content">{{util.format(bookDetail.summary)}}</text>

将某些需要复用的函数等卸载wxs文件中,可以进行复用。

图片预览wx.previewImage

wx: wx.previewImage({
      // 预览的图片,可以有多个 值是src的值 也就是链接地址
      urls: [this.data.movie.image],
      // 当前预览的第一张图片
      current: this.data.movie.image
    })

串行和并行

同时发起多个请求,如果服务器支持多线程,同时可以处理多个请求,那么就是并行。很明显并行是比穿行效率高的。

Promise.all/race

使用Promise的静态方法,all方法可以将多个promise对象合并为一个promise,当所有的promise处理完毕后,才会返回新的promise。这个返回的promise可以视作为多个我们传递的promise对象和合集。

const getBookDetail = bookModel.getBookDetail(bookId);
const getComments = bookModel.getBookComments(bookId);
const getLikeStatus = bookModel.getBookLikeStatus(bookId);
Promise.all([getBookDetail, getComments, getLikeStatus])
    .then((res) => {
    // 返回值res就是一个数组,传递到all的参数数组有几个元素
    // res这个返回值数组就有几个元素
    this.setData({
        bookDetail: res[0],
        comments: res[1].comments,
        likeStatus: res[2].like_status,
        likeCount: res[2].fav_nums
    })
    // 隐藏加载中的提示框
    wx.hideLoading();
})

race方法和all方法则相反,只要有任何一个传递的promise对象率先完成了请求,就会执行返回值的回调。不会等待其他的,所以:rece方法返回的promise对象,我们的then方法里面只会有第一个请求完成的那个promise的返回值。

也就是res只有一个返回值。

加载更多

实现类似瀑布屏一样的效果,我们有两种解决方案

  1. 使用小程序的scroll-view组件,比较简单
  2. 使用 Page页面的 onReachBottom事件来实现加载更多的效果。

onReachBottom

该处理函数在当前页面上拉触底事件的触发的时候,会进行回调该函数。

onReachBottom() {
    // 触发该函数,让搜索组件加载更多的数据
    this.setData({
      more: randomString(32)
    })
  }

在页面触发该函数,然后让组件内部就开始发起请求,加载更多数据。randomString(32)是生成指定位数随机字符串的自定义函数。

search组件加锁/避免死锁

开发search组件的时候,在发起请求的时候,我们一般都会在请求之前进行加锁,避免在请求的数据没有返回之前,发起二次请求,这时候,我们是讲锁的释放防到了请求成功的回调函数中,这种情况下,一旦发起的请求失败,比如突然断网,这时候就会处于锁无法释放。

在请求失败的请求下,我们也需要释放锁。这里要注意。

open-data

使用该标签可以展示微信提供的接口。也就是展示微信开放的数据。比如使用这个标签的type属性看样子展示用户头像,用户昵称等。

  <!-- 获取用户信息 调用小程序的接口 不需要授权就能显示用户的头像和昵称 -->
  <!-- 这种方式只能展示,无法在js中获取用户的信息 -->
  <open-data class="avatar avatar-position" type="userAvatarUrl" />

如果只是展示用户的某些数据,可以使用这个标签。但是如果需要获取用户信息提交到服务器,那么我们必然是需要在js中获取到用户信息的。那么这种方式是不可行的。

微信小程序用户授权

wx.getUserProfile(Object object)

截止21年9月,目前新版的授权方式发生了比较大的变化。

获取用户信息。页面产生点击事件(例如 buttonbindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo

也就是说: 只有在页面发生了点击行为的回调函数中,才能通过这个getUserProfile方法进行弹出用户授权的提示框。而且即使授权过,也可以再次点击授权,用户同意授权后可以在该方法的回调函数中拿到用户授权后的信息。

  <button bindtap="getUserInfo">授权</button>
getUserInfo(event){
    
    wx.getUserProfile({
      lang:"zh_CN",
      desc:"是否授权",
    }).then((res)=>{
      console.log(res);
    })
  }

这种方式每次只有点击以后才能获取到授权后的用户数据。

wx.getUserInfo()

About

微信小程序

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published