学习笔记-小程序

小程序学习

一、小程序

1. 轮播图

swiper组件

indicator-dots 导航器

autoplay 是否自动播放

interval 播放间隔

duration 动画时长

image标签

mode：

1. scaleToFill （默认值） 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。
2. aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
   意思就是说，将图片缩放到刚好能居中放入 image 中，此时 image 可以有空白部分。
3. aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
4. widthwise宽度不变，高度自动变化，保持原图宽高比不变。
   意思就是以 image 的宽为准，将原图按比例缩放至正好能放入 image 中，此时image 的高度就是缩放后的图片高度，也就是说 image 不会有多余空白部分。

2.数据绑定

• 自定义组件事件数据传递

  • //传递方
    this.triggerEvent('eventName', Object)
    

  • //接收方
    //wxml绑定事件
    <x bind:eventName="OnEvent"/>
    //js实现OnEvent
    OnEvent:function(event){
           
    	this.detail
    }
    

• wxml数据传递

  • <x data-valueName="{
            {value}}" bind:eventName="OnEvent"/>
    

  • OnEvent:function(event){
           
    	event.target.dataset.valueName
    }
    

• 云函数

  • ...then((res)=>{
           res.data})
    

3.用户信息

3.1检查用户是否授权

// 检查设置
wx.getSetting({
   
    success: (res)=>{
   
        if(res.authSetting['scope.userInfo']){
   
            ;
        }
    }
})

3.2进行授权

//wxml
<button opentype="...." on..../>
//js
//完成回调函数

4.获取用户信息

4.1获取信息

4.1.1 <open-data>

4.1.2 wx.getUserInfo

4.1.3 button

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

4.2获取openId

4.2.1 传统微信登录-

​ wx.login获取code，wx.request将code传输给后端服务器，后端服务器使用code换取openid和session_key

4.2.2 云开发

5.API

API调试需要使用真机进行

5.1 发送订阅消息（模板信息已下线）

5.1.1 获取订阅ID

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-emXMWBG9-1612419241354)(C:\Users\litan\AppData\Roaming\Typora\typora-user-images\image-20200615091223687.png)]

5.1.2 获取下发权限

wx.requestSubscribeMessage(Object object)

wx.