小程序学习笔记

作者: 团猫咪爱吃玉米 | 来源:发表于2018-11-15 11:34 被阅读3次

微信公众平台 —— 小程序Demo开发学习笔记
小程序学习笔记-setData()使用和注意事项
小程序学习笔记-2：NavigationBar和TabBar的使
小程序学习笔记-3：页面结构和布局
2019-10-21 微信小程序学习笔记
小程序学习笔记
小程序学习笔记
小程序学习笔记
小程序学习笔记
小程序学习笔记

良好的结构：组件式编程

e5bb8e532045b1c7dea0afb8c83768f.png
61c66c30298011b9736134dcfc6d2ad.png
自定义组件
比如我要在classic页面中使用like组件，则在classic.json文件中编写如下代码：

{
  "usingComponents": {}
}

4de1e7b21c9d583182c762d3c862aaf.png
如图所示：
v-like是组件名，value是组件引用路径。组件中也可以使用组件，使用方法和在页面中使用组件相同。

小程序现在对es6的支持已经非常好了
px与rpx：经验，以iphone6的尺寸设计（750*1334的设计图）在小程序上，设计图上的px和小程序的rpx单位是1:1的关系，即设计稿是多少px,小程序的单位就是多少rpx
app.wxss设置的全局样式，只有font、color可以被组件继承，但几乎所有的样式都能够被page页面继承。

64c84d75be23d55d15443481acc4cff.png
Ios上默认的中文字体是平方，安卓上默认的中文字体是思源
字体默认上下会有空白间距，比如字体设置48px，如何消除空白呢？设置line-height也为48px
display:flex默认容器还是块级元素。如何消除块级元素特性实现宽度自适应呢？display: inline-flex
Page.prototype.setData(Object data, Function callback)setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
组件的properties存储的是公开的属性，可以被外部访问到。data中存储的是私有数据，外部无法访问。可用于模板渲染。对于一个 page页面来说，wxml所使用的变量都是由 data 决定的，而在组件里，data和properties都可以被wxml使用。使用方法:
532159e55ab8e6a3e4fb0891c2243b6.png
小程序组件数据传递(父传子)使用properties。
这里注意： 如果properties是驼峰命名（比如：openType），在模板中使用时需写成 - 连接（open-type）
自定义事件(子传父)
如何激活自定义事件？

this.triggerEvent('自定义事件名'，{}，{})

第二个参数通常传递一些我们自定义的属性，这个参数实际上是在设置事件event的detail属性。
第三个选项通常不需要设置，是事件的捕获冒泡等

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

 <v-like class="like" bind:like="onLike" like="{{likeStatus}}" count="{{likeCount}}" />

在页面上使用bind:自定义事件名触发页面上的onLike方法

当我们改变了组件的属性值的时候，微信小程序会主动调用observer函数。注意：千万不要在observer中修改自身的属性，否则会产生无限递归调用导致内存耗尽，内存溢出。

 properties: {
    index: {
      type: String,
      observer: function(newVal, oldVal, changedPath){
        let val = newVal < 10?'0'+newVal:newVal
        this.setData({
          _index:val
        })
      }
    }
  },
 data: {
    _index:''
  }

小程序组件代码的复用通过behavior实现，编写behavior的方式和component的方式没多大区别

1a4d6fc84bd7afbb41a2110644c1c28.png
268da0e6d12ad7428a164aa20601c5f.png
小程序上线和运行的api接口必须是https
真机上测试的话，扫码二维码进入。如果想在真机上访问服务器的api,需在真机上打开服务器的调试模式。右上面三个点
wxml上动态绑定class的写法：

 <image class="classic-img {{playing?'rotation':''}}" src="{{img}}" />

小程序页面page参数传递，通过onLoad生命周期函数里的options获取从外部传来的数据

 wx.navigateTo({
    url:`/pages/book-detail/book-detail?bid=${bid}`
 })

onLoad: function (options) {
    const bid = options.bid
}

组件slot

<view bind:tap="onTap" class="container">
    <slot name="before"></slot>
    <text >{{text}}</text>
    <slot name="after"></slot>
</view>

<v-tag bind:tapping="onPost" text="{{item.content}}">
    <text class="num" slot="after">{{'+'+item.nums}}</text>
</v-tag>

注意：要想在组件里使用slot，必须在组件的js文件里options加入multipleSlots: true

Component({
  options: {
    multipleSlots: true,
  },
})

组件外部样式：externalClass

先在组件js文件里定义externalClasses

Component({
  options: {
    multipleSlots: true,
  },
  externalClasses:['tag-class'],
  properties: {
    text: String
  }
})

在组件内部需要改变样式的标签上加上定义的class名

<view bind:tap="onTap" class="container tag-class">
    <slot name="before"></slot>
    <text >{{text}}</text>
    <slot name="after"></slot>
</view>

使用组件时，定义的class名作为组件的属性使用

<v-tag bind:tapping="onPost" tag-class="ex-tag" text="{{item.content}}">
    <text class="num" slot="after">{{'+'+item.nums}}</text>
</v-tag>

编写要使用的样式

.ex-tag {
    background-color: #fffbdd !important;
}

wxs的使用：可以在wxml中调用自定义函数

新建一个文件，后缀名是.wxs

module.exports = {
    format,
    limit
}

在wxml中使用wxs里的方法

<wxs src="../../util/filter.wxs" module="util" />

<block wx:for="{{util.limit(comments, 3)}}" wx:key="content">
      <v-tag bind:tapping="onPost" tag-class="{{tool.highlight(index)}}" text="{{item.content}}">
            <text class="num" slot="after">{{'+'+item.nums}}</text>
      </v-tag>
</block>

// 还有一种方式就是直接在wxml里写wxs，这种方式不推荐
<wxs module="tool">
    var highlight = function(index){
        if(index==0){
            return 'ex-tag1'
        }
        if(index==1){
            return 'ex-tag2'
        }
        return ''
    }

    module.exports = {
        highlight:highlight
    }
</wxs>

文本里解析转义字符: decode可以解析的有   < > & ' &ensp; &emsp;

<text class="content" decode="{{true}}">{{util.format(book.summary)}}</text>

监听用户把当前页面滑动到最底部：

使用小程序内置组件scroll-view
或使用 page页面的onReachBottom事件(在组件里无法使用这个事件)

用户授权

新版小程序必须使用button组件调出授权的弹窗（让用户主动点击button）

<button bind:getuserinfo="onGetUserInfo" 
    open-type='{{openType}}'  plain='{{true}}'
     class="container">
  <slot name="img"></slot>
</button>
// 自定义的button
<v-button wx:if="{{!authorized}}" open-type="getUserInfo" class="avatar-position" bind:getuserinfo="onGetUserInfo">
        <image slot="img" class="avatar" src="/images/my/my.png" />
</v-button>