小程序学习笔记

微信开发文档

黑马零基础学习微信小程序视频

小程序开发者设置页面

    button 按钮组件
    1.属性：
     ①. size 按钮尺寸
     ②. type 按钮颜色种类  分为：default白色 primary绿色 warn红色
     ③. plain 按钮是否镂空 背景色透明
     ④. open-type 按钮的功能
     ⑤. loading 是否带加载图标
    2.open-type 功能分类
      (1).contact
    打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从
      (2).bindcontact 
    回调中获得具体信息，具体说明
      (3).share 
    触发⽤⼾转发，使⽤前建议先阅读使⽤指引
      (4).getPhoneNumber
    获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾信息，
      具体说明
      (5).getUserInfo 
    获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息
      (6).launchApp 
    打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
      (7).openSetting 
    打开授权设置⻚
      (8).feedback
    打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志，开发者可以登
    录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

注意事项：
一、contact 向客服发送信息无效  需要客服登录客服助手小程序才能接受用户反馈信息和聊天信息 
二、getPhoneNumber获取用户手机号没有弹窗，原因是只有企业小程序才可以获取，个人小程序是无法获取用户手机号
三、getUserInfo 已废弃 改用getUserProfile
https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801
 (1).XXX.wxjs中：
 Page({
  data:{
    userInfo:{},
    hasUserInfo:false,
  },
  getUserProfile(e){
    wx.getUserProfile({
      desc:'获取信息的用途',
      success:(res)=>{
        this.setData({
          userInfo:res.userInfo,
        })
      }
    })
   }
})

 (2).XXX.wxml中： 
 <button bindtap="getUserProfile">getUserInfo</button>

微信小程序之 var和let区别

微信小程序中Var、Let、Const用法详解

微信小程序 ：flex 布局

微信小程序开发:Flex布局

自定义组件学习之点击事件绑定

// component/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },
  /**
   * 组件的初始数据
   */
  data: {
     tabs:[
       {
         id:0,
         name:"首页",
         isActive:true
       },
       {
         id:1,
         name:"原创",
         isActive:false
       },
       {
         id:2,
         name:"分类",
         isActive:false
       },
       {
         id:3,
         name:"关于",
         isActive:false
       }
     ]
  },

  /**
   * 组件的方法列表
   */
  // 在页面.js 文件中，存放事件的回调函数的时候，是放在跟data{} 同层级下
  // 在组件.js 文件中，存放事件的回调函数的时候，是放在methods{}里面的
  methods: {
      handleItemTabs(e){
        /*
        1.在view标签中绑定点击事件  在组件的js文件中的methods{}中编写点击事件
        2.获取被点击的索引（下标）
        3.获取原数组
        4.对数组循环
        （1）给每一个循环项 选中属性 改为false
        (2) 给 当前的索引项添加激活选中效果
        */
       //打印看看如何获取下标（索引）
      //  console.log(e);尝试打印显示查看值
      //  获取下标（索引）
      // es6解构赋值
      const {index} = e.currentTarget.dataset;

      /*拷贝一份临时数组tabs 对临时数组进行数据处理 */
      // 获取data中的原数组，es6解构赋值写法
      let {tabs} = this.data;
      // 上面一行写法等价于let tabs = this.data.tabs; 声明临时数组变量tabs然后直接赋值

      // forEach()括号里是个回调函数，通过制定条件修改数组，它会返回一个修改后的新数组
      // 写法一：
      // tabs.forEach((a,i)=>a.isActive=(i===index));
      // 写法二：三目运算符，跟C语言一致 
         tabs.forEach((a,i)=>i===index?a.isActive=true:a.isActive=false);
      // 写法三：
      // 将数组中的项的isActive赋值为false
      //   for (let i = 0; i < tabs.length; i++){
      //         tabs[i].isActive = false;
      //   }
      //   // 将点击的事件的项中的isActive赋值为true
      //   tabs[index].isActive = true;

       // 将data中的的tabs的值修改为新的tabs
        this.setData({
          tabs
        })
      }
  }
})

js中的深拷贝：利用JSON.stringify和JSON.parse

let swr = {
    name:"邵威儒",
    age:28,
    pets:['小黄']
}

let swrcopy = JSON.parse(JSON.stringify(swr))
console.log(swrcopy) // { name: '邵威儒', age: 28, pets: [ '小黄' ] }
// 此时我们新增swr的属性
swr.pets.push('旺财')
console.log(swr) // { name: '邵威儒', age: 28, pets: [ '小黄', '旺财' ] }
// 但是swrcopy却不会受swr影响
console.log(swrcopy) // { name: '邵威儒', age: 28, pets: [ '小黄' ] }

js实现浅拷贝和深拷贝（深度克隆）

新建项目遇到的问题：

VM1197 WAService.js:2 asmCrypto seems to be load from an insecure origin; this may cause to MitM-attack vulnerability. Consider using secure transport protocol.

解决办法：将基础库调整到较低版本，太高的版本会有警告信息

待解决问题：cover-image显示的图片会被拉伸，不正常

<view wx:if="{{isShowPic}}">
  <cover-image mode="aspectFill" src="{{photoPath}}" style="width:100%; height:{{cameraHeight}}px; display:block"></cover-image>
</view>

小程序图片转换Base64格式的三种方法

小程序页面间传递对象

微信小程序 页面传值详解

横竖屏切换

1.在手机上启用屏幕旋转支持

• 从小程序基础库版本 2.4.0 开始，小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是：在 app.json 的 window 段中设置 "pageOrientation": "auto" ，或在页面 json 文件中配置 "pageOrientation": "auto" 。
• 如果页面添加了上述声明，则在屏幕旋转时，这个页面将随之旋转，显示区域尺寸也会随着屏幕旋转而变化。从小程序基础库版本 2.5.0 开始， pageOrientation 还可以被设置为 landscape ，表示固定为横屏显示。

2.在 iPad 上启用屏幕旋转支持

从小程序基础库版本 2.3.0 开始，在 iPad 上运行的小程序可以支持屏幕旋转。使小程序支持 iPad 屏幕旋转的方法是：在 app.json 中添加"resizable": true

云开发

云开发文档

一、进行云开发之前需要对云环境进行初始化

• 1. 默认实例初始化
• 2. 创建实例初始化
     

promise风格的函数调用

var myFirstPromise = new Promise(function(resolve, reject){
    //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
    //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
    setTimeout(function(){
        resolve("成功!"); //代码正常执行！
    }, 250);
});
 
myFirstPromise.then(function(successMessage){
    //successMessage的值是上面调用resolve(...)方法传入的值.
    //successMessage参数不一定非要是字符串类型，这里只是举个例子
    document.write("Yay! " + successMessage);
});

less原样编译

image{
height:~‘calc(100vh - 90rpx)’
}

js判断一个对象是否为空

var object = {};

if (Object.keys(object ).length === 0) {
   console.log(‘空对象‘)
}

云数据库查询异步请求同步化

  // 同步化查询数据库中唯一标识是否已经存在
  // 将异步请求同步化
  async getRandomNumber() {
    // 尝试获取唯一标识
    const randomNum = this.randomNumber();
    // 发送请求查询唯一标识是否已经存在
    try {
      const db = wx.cloud.database();
      const res = await db.collection('resource').where({
          fileFlag: randomNum
        })
        .get();
      console.log("数据库resource查询成功-->", res);
      // 唯一标识已经存在,递归重新生成唯一标识返回
      if (res.data.length !== 0) {
        return this.getRandomNumber(); //返回重新生成的唯一标识
      }
      // 唯一标识在数据库中不存在，返回唯一标识
      return randomNum;
    } catch (err) { //请求出现错误
      console.log("数据库resource查询错误-->", err);
    }
  },

云函数上传文件异步请求同步化

  // 上传文件(绑定文件名为fileFlag)
  async upLoadFile(fileFlag, filePath) {
    try {
      const res = await wx.cloud.uploadFile({
        cloudPath: fileFlag,
        filePath: filePath,
      });
      console.log("文件上传成功,信息为-->", res)
    } catch (err) {
      console.log("文件上传失败-->", err)
    }
  },

Promise风格

  // 选择文件
  chooseFile() {
    return new Promise((resolve, reject) => {
      // 本地获取文件选择要上传的文件，保存文件信息
      wx.chooseMessageFile({
        count: 10,
        success: res => {
          resolve(res)
        },
        fail: err => {
          reject(err)
        }
      })
    })
  },

  // 选择文件后的处理
  async hit(e) {
    await this.chooseFile()
      .then(res => {
        console.log("文件信息-->", res);
        this.setData({
          fileInfo: res.tempFiles
        })
      }).catch(err => {
        console.log("取消选择文件", err)
      })
      // 判断是否为空对象
      if (Object.keys(this.data.fileInfo ).length === 0) {
        return
     }
   }

js对象数组根据条件筛选

  // 发送请求获取所有resource数据，并根据用户选择的索引进行赋值
  getResourceList() {
    wx.cloud.database().collection('resource')
    .get()
    .then(res=>{
          this.setData({
            resource: res.data,
            // 将返回的对象数组进行筛选，根据属性class和sign进行筛选
            list:res.data.filter(item => item.class === this.data.leftIndex && item.sign === this.data.rightIndex)
          });
          console.log("资源数据获取成功-->", this.data.resource);
          console.log("筛选的数据-->",this.data.list);
    })
    .catch(err=>{
                console.log("资源数据获取失败-->", err);
          wx.showToast({
            title: '数据加载错误',
            icon: 'none',
            duration: 2000
          })
    })
  },

小程序文本渲染设置规定行数之后显示省略号

.item_name {
    height: 80rpx;//容纳文本的边框高度
    font-size: 30rpx;//文字大小
    width:55vw;//给文本边框设置宽度，需要给文本设置边框，否则会挤占其他布局
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;//规定行数
    -webkit-box-orient: vertical;
}

小程序标签的吸顶效果、防止事件穿透

    position: sticky;
    top: 0;//当前标签项相对于某个位置就不再滑动
    z-index: 300;//设置层级

js数组逆置、对象数组中根据某一属性值进行排序

  // 根据索引筛选数据
  filtertData() {
    var tempList = JSON.parse(JSON.stringify(this.data.articleList));
    switch (this.data.leftIndex) {
      case 0:
        this.setData({
          list: tempList.reverse()
        })
        console.log("按照时间降序排序");
        break;
      case 1:
        this.setData({
          list: tempList.sort(this.compare('likeNum'))
        })
        console.log("按照点赞量降序排序");
        break;
      case 2:
        this.setData({
          list: tempList.sort(this.compare('scanNum'))
        })
        console.log("按照浏览量降序排序");
        break
    }
  },

  compare(property) {
    return function (a, b) {
      var value1 = a[property];
      var value2 = b[property];
      return value2 - value1; //降序
    }
  },

对页面的data中数组的某一项数据进行赋值或者修改 的语法

注意符号不是单引号，而是--> `

 this.setData({
   [`articleList[${index}]`]: this.data.articleList[index].concat(res.data)
 })