一.模板语法

1.标签

• < view></ view>（块组件）
• < text></ text>（行内组件）
• button组件（按钮）
• input组件（表单）

2.条件渲染

• wx:if=“”
• wx:elif=“”
• wx:else=“”

3.文本渲染

• {{ msg}}
• 可以执行简单的js表达式
• {{2+3}}
• {{msg.length}}

4.列表渲染

• wx:for=“{{list}}”
• wx:key=“index”
• 渲染数据：{{item}} {{index}}

5.自定义渲染

• wx:for=“{{list}}”
• wx:key=“index”
• 定义item与index的名称：wx:for-item=“mylist” wx:for-index=“myidx”
• 渲染数据：{{myidx+1}}、{{mylist}}

二.事件

1.绑定事件

• bindinput：绑定表单输入时的事件
• bindconfirm：绑定表单确认时的事件
• bindtap：绑定点击时的事件

2.事件传参

//wxml
<button type="primary" bindtap="sayHi" data-msg="中国">事件传参1</button>
<button type="warn" bindtap="sayHi" data-msg="家乡">事件传参2</button>

//wxjs
sayHi(e){
    console.log(e);
    var msg = e.target.dataset.msg;
    wx.showToast({
      title: '你好'+msg,
    })
  },

3.内置api

• showToast：显示提示
• wx.setStorageSync(‘key’, value)：本地存储
• wx.getStorageSync(‘list’)：本地取
• wx.request：网络请求
• this.setData({s1})：更新数据与视图

三.页面跳转

1.组件跳转（< navigator>）

url跳转的地址、open-type（打开类型）

• navigate：普通跳转
• navigateBack：返回
• redirect：重定向
• switchTab：导航栏
• reLaunch：重启

<view>
  <navigator url="/pages/event/event?name=wzy&age=18" open-type="navigate">事件event</navigator>
</view>
<view>
  <navigator url="/pages/event/event?name=王振愉&age=23" open-type="redirect">重定向</navigator>
</view>
<view>
  <navigator open-type="reLaunch">重启</navigator>
</view>
<view>
  <navigator open-type="navigateBack">返回</navigator>
</view>

2.API跳转

• wx.navigateTo：跳转
• wx.switchTab：切换底部栏
• wx.redirect：重定向
• wx.reLaunch：重启

<button size="mini" type="primary" data-type="navigate" bindtap="goEvent">跳转到event</button>
<button size="mini" type="warn" data-type="redirect" bindtap="goEvent">跳转到event(替换)</button>

goEvent(e){
    //获取传递的参数type
    var type = e.target.dataset.type;
    // 如果type的值是redirect 替换跳转
    if(type=="redirect"){
      wx.redirectTo({
        url: '/pages/event/event',
      })
    }else{
      //否则就普通跳转
      wx.navigateTo({
        url: '/pages/event/event',
      })
    }
  },

四.页面传参

1.页面传参

• 小程序页面传参只要是通过查询传参
• 传：url=“/pages/event/event?name=wzy&age=18”
• 接收：onLoad(options) {}

2.全局传参

• 定义app.jsde globalData
• 页面使用
  1. var app = getApp()
  2. app.globalData.num

五.封装

1.封装request

//定义基础的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}

2.封装api

// 导入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
}

六.构建npm

构建npm：点击 工具 -> 构建 npm