微信小程序学习笔记2

前面学了一些基础组件和框架知识，现在学习API的知识

简介

api就是小程序内置的一些方法和事件，只要学会怎么调用就可以了

基础

系统信息

wx.getSystemInfoSync:获取系统信息。可以使用他的model属性获取手机型号

界面

交互

wx.showLoading:显示loading提示框。title属性设置提示的内容。需主动调用wx.hideLoading才能关闭提示框

wx.hideLoading:隐藏loading提示框

wx.showToast:显示消息提示框。title属性设置提示的内容，icon设置图标

路由

wx.navigateTo:保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。导航组件(navigator)默认用的跳转方式就是这个api，所以他不能跳转到tabbar页面，为了点击tabbar后是独立的页面，而不是点击之后还有返回

wx.switchTab:跳转到tabBar页面，并关闭其他所有非tabBar页面。设置导航组件(navigator)的open-type为switchTab，这样就调用了这个api，可以跳转到tabBar页面了

wx.reLaunch:关闭所有页面，打开到应用内的某个页面。设置导航组件(navigator)的open-type为reLaunch，这样就调用了这个api，可以跳转到tabBar页面了。他和switchTab的很像但是他调用的这个api的url路径可以带参数，所以通常用reLaunch做跳转

wx.navigateBack:关闭当前页面，返回上一页面或多级页面。他只能返回用navigateTo来转跳的页面

页面跳转可以用navigator组件，也可以在其他组件上绑定点击事件，然后再js里面写函数调用api来跳转

简单布局

wxml:

<view class="row" wx:for="{{datalist}}">
  <view class="pic">
    <image src="{{item.url}}"></image>
  </view>
  <view class="text">
    <view class="title">{{item.title}}</view>
    <view class='time'>{{item.time}}</view>
  </view>
</view>

js:

data: {
  datalist:[
    {title:"标题1",time:"2021-5-20",url:"/images/1.jpg"},
    {title:"标题2",time:"2021-5-21",url:"/images/2.jpg"},
    {title:"标题3",time:"2021-5-22",url:"/images/3.jpg"}
  ]
},

网络

发起请求

wx.request:发起HTTPS网络请求。他是封装的ajax，他的写法和jquery的ajax差不多，请求接口里的数据。

属性如下

url:开发者服务器接口地址

data:请求的参数

success:接口调用成功的回调函数

还有很多属性。。

实例，通过网络请求获取接口数据

data: {
  datalist:[
    {title:"标题1",time:"2021-5-20",url:"/images/1.jpg"},
    {title:"标题2",time:"2021-5-21",url:"/images/2.jpg"},
    {title:"标题3",time:"2021-5-22",url:"/images/3.jpg"}
  ],
  resdata:[]
},
onLoad: function (options) {
  wx.request({
    url: 'http://edu.newsight.cn/wxList.php',
    data:{},
    success:res=>{
      this.setData({
        resdata:res.data
      })
    }
  })
},

AppData里可以看到获取的数据：

把获取到的数据用到前面的布局里

wxml:

<view class="row" wx:for="{{resdata}}">
  <view class="pic">
    <image src="{{item.picurl}}"></image>
  </view>
  <view class="text">
    <view class="title">{{item.title}}</view>
    <view class='time'>{{item.posttime}}-{{item.author}}</view>
  </view>
</view>

js:

data: {
  resdata:[]
},
/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  wx.request({
    url: 'http://edu.newsight.cn/wxList.php',
    data:{
      num:5,
      page:2
    },
    success:res=>{
      this.setData({
        resdata:res.data
      })
    }
  })
},

结果如下

再写一个下一页跳转按钮，把网络请求写成一个getList方法来用，在data里设置一个num变量，用它自增长来获取下一页

wxml：

<view class="row" wx:for="{{resdata}}" wx:key="index">
  <view class="pic">
    <image src="{{item.picurl}}"></image>
  </view>
  <view class="text">
    <view class="title">{{item.title}}</view>
    <view class='time'>{{item.posttime}}-{{item.author}}</view>
  </view>
</view>
<button bindtap="nextpage" type="primary">下一页</button>

js:

data: {
    resdata:[],
    num:1
  },
  /**
   * 生命周期函数--监听页面加载
   */
  nextpage:function(){
    this.data.num++
    this.getList(this.data.num);
  },
  getList:function(p=1){//不传参默认p=1
    wx.request({
      url: 'http://edu.newsight.cn/wxList.php',
      data:{
        num:5,
        page:p
      },
      success:res=>{
        console.log(res)
        this.setData({
          resdata:res.data
        })
      }
    })
  },
  onLoad: function (options) {
    this.getList();
  },

ES6的用法

1.const和let用法

参考之前写的笔记 https://tianzeee.github.io/2021/04/12/JavaScript/#JavaScript-let%E5%92%8Cconst

简单来说就是const定义常量，let定义块级变量

2.模板字面量

模板字面量是增强版的字符串，它用反引号（`）标识

模板字面量看上去仅仅是普通JS字符串的升级版，但二者之间真正的区别在于模板字面量的变量占位符。变量占位符允许将任何有效的JS表达式嵌入到模板字面量中，并将其结果输出为字符串的一部分

变量占位符由起始的 ${ 与结束的 } 来界定，之间允许放入任意的 JS 表达式。最简单的变量占位符允许将本地变量直接嵌入到结果字符串中

使用模板字面量便于字符串拼接

var name="张三";
var age=20;
var gender="男"
var person=`我的名字是${name},我的年龄是${age},我是${gender}生`;
//传统写法如下
//var person="我的名字是"+name+",我的年龄是"+age+",我是"+gender+"生";
document.write(person);

JS不支持多行字符串，但是用模板字面量可以随意换行，在里面写一些html标签就变得容易了

var title=`
<h1>
	啦啦啦
	<em>你好${name}</em>
</h1>`;
document.write(title);

4.解构赋值

交换值

var a=1;
var b=2;
[a,b]=[b,a];
console.log(a,b) //2 1

数组解构

var arr=[1,2,3,4];
var [a,,b]=arr;
console.log(a,b); //1 3

对象解构

var obj={
	name:"张三",
	age:20,
	gender:"fale",
	job:"前端开发"
};
var {name,job}=obj;
console.log(name,job); //张三 前端开发

5.箭头函数

参考之前笔记 https://tianzeee.github.io/2021/04/15/JavaScript-function/#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0

箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

6.默认参数

参考之前笔记 https://tianzeee.github.io/2021/04/15/JavaScript-function/#%E9%BB%98%E8%AE%A4%E5%8F%82%E6%95%B0

7.循环遍历

for-of遍历

var arr=[1,2,3,4];
for(var i of arr){
	console.log(i);
}

forEach遍历

var arr=[1,2,3,4];
arr.forEach((val,index)=>{
	console.log(val,index);
})

8.展开运算符…

var arr=[1,2,3,4];
var arr2=['a','b','c','d'];
//arr=arr.concat(arr2); //老写法
arr=[...arr,...arr2];
console.log(arr);

参考

https://developers.weixin.qq.com/miniprogram/dev/api/

https://www.cnblogs.com/xiaohuochai/p/7234281.html