微信小程序相关知识点总结（一）

一、模板语法

1.1 数据绑定

在wxml文件中：
<text></text>相当于网页中的<span></span>
<view></view>相当于<div></div>
<checkbox></checkbox> 相当于复选框
page方法里传入一个对象：data是关键字不能更改放在data里的就是初始化数据

 
<!--1 字符串-->
<view>{{msg}}</view>
<!--2 数字-->
<view>{{num}}</view>
<!--5 在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>

//js
Page({
    data:{
        msg:"hello",
        num:9999,
    }
})

1.2 列表渲染

<view>
	<view 
          wx:for="{{list}}" 
          wx:key="id">
        值：{{item.name}}
    </view>
</view>

列表循环：
1.wx:for=“{{数组或者对象}}” wx:for-item=“循环项目的名称” wx:for-index=“循环项的索引”
2.wx:key="唯一的值"用来提高列表渲染的性能
key绑定的值
3.嵌套循环：尤其要注意 以下绑定的名称不要重名 wx:for-item=“item” wx:for-index=“index”

1.3 条件渲染

<view>条件渲染</view>
<view wx:if="{{score>=90}}">A+ 奖励🌹</view>
<view wx:elif="{{score>=80}}">A奖励🎉</view>
<view wx:elif="{{score>=70}}">B奖励了👏</view>
<view wx:else>C不合格</view>

pages{
 data: {
    u1:{name:"lili",age:9},
    u2:{name:"susu",age:19},
    list:["vue","react","u-app"],
"msg":"你好，小程序",
"score":89
  },
  }

1.4 事件绑定

小程序中绑定事件，通过bind关键字来实现，如：bindtap bindinput bindchange 等不同的组件支持不同的时间，具体看组件的说明

• bindinput：
  bindinput方法可以监听到当前输入框的值，类似于onchange事件，但不太一样。通过e.detail.value可以获取到input的值，return返回的字符串可以替换掉输入的字符串。
  -bindtap：
  在组件中绑定一个事件处理函数。== bindtap==，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

二、页面跳转/切换

2.1 tabBar跳转

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
使用流程

1. 配置信息

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/info/info",
      "text": "首页"
    }, {
      "pagePath": "page/exp/exp",
      "text": "经历"
    }]
  },
 }

2. 添加 tabBar 代码文件

2.2 页面切换

2.2.1 页面间跳转

在wxsl页面写

<!--index.wxml-->
<navigator url="../todo/todo">去todo页面</navigator>

2.2.2 重定向跳转

2.2.3 页面传值

可以进行跳转后，也需要在跳转的时候，将数据传递给下一个页面，即页面间传值

<!--index.wxml-->
<navigator url="../demo1/demo1?name=Jack&sex=male">Jack</navigator>
<navigator url="../demo1/demo1?name=Tom&sex=female">Annie</navigator>

// pages/demo1/demo1.js
Page({
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        console.log(options)
    }
})

2.2.4 api 跳转

内置的api

• 显示提示 showToast
• 本地存储 wx.setStorageSync(key,value)
• 本地获取 wx.getStorageSync(key)
• wx.request 网络请求

四、封装request

为什么封装request?

1.定义baseURL
2.添加请求头
3.添加加载提示
4.统一错误处理

wx.request API

wx.request({
  url: 'www.baidu.com', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
});

项目中，wx.request的很多参数都是固定的，只需要改变data的值，而一般我们的逻辑处理都是在wx.request的回调success，fail和complete中操作的，并且有部分逻辑也是相同的，（比如判断接口返回数据是否成功，根据成功或失败显示不同的提示框等等），所以在这边用了Promise来做了一个链式调用封装，少去了大部分重复语句。

//定义基础的URL
//const app = getApp();
//const URI = app.globalData;
// 基础的url
const URI = {
  baseURL:"http://dida100.com"
}
// {name:"mumu",age:18} => name=mumu&age=18
function tansParams(obj){
  var  str = "";
  for(var k in obj){
    str+=k+"="+obj[k]+"&";
  }
  //移除最后一个&
  return str.slice(0,-1);
}
function request(option){
  var url = option.url;
  // 01 可以添加baseURL
  // 是不是以http开头的，是用url不是加上baseURL
  url = url.startsWith("http")?url:URI.baseURL+url;
  // 选项里面有params（get传入的参数）
  if(option.params){
    // 如果有参数，把参数转换为url编码形式加入
    url+="?"+tansParams(option.params);
  }

  // 02 可以添加请求头
  var  header = option.header||{};
  header.Authorization ="Bearer "+wx.getStorageSync('token');

  // 03 可以添加加载提示
  if(option.loading){
    wx.showToast({
      title: option.loading.title,
      icon:option.loading.icon,
    })
  }
  // 返回一个promise
  return new Promise((resolve,reject)=>{
      wx.request({
        // 请求的地址如果一http开头直接用url不是http开头添加我们 baseUrL
        url: url,
        method:option.method||"GET",//请求的方法 默认get
        data:option.data, //post出入的参数
        header,
        success(res){
          // 请求成功
          resolve(res.data);
        },
        fail(err){
          // 04 对错误进行处理
          wx.showToast({title:"加载失败",icon:"none"})
          // 请求失败
          reject(err);
        },
        complete(){
          // 关闭加载提示
          wx.hideToast();
        }
      })
  })
} 
// 定义get简易方法
request.get= (url,config)=>{
  return request({url,method:"get",...config})
}
// 定义post简易方法
request.post= (url,data,config)=>{
  return request({url,method:"post",data,...config})
}
// 导入request
module.exports={request}

应用request.js

// 导入request
const {request}  = require("../utils/request")
// 定义api
// 获取频道与分类
function GetCategory(){
  return request.get("/mi/cats.php")
}

// 获取分类列表
function GetNewsList(data){
  return request.get("/mi/list.php",{params:data})
}

// 获取新闻内容
function GetNewsContent(data){
  return request.get("/mi/content.php",{params:data,loading:{
    title:"内容准备中...",
    icon:"loading"
  }})
}
module.exports = {
  GetCategory,GetNewsList,GetNewsContent
}