微信小程序

最新推荐文章于 2024-11-03 09:30:00 发布

Lin_25937

最新推荐文章于 2024-11-03 09:30:00 发布

阅读量167

点赞数

文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/Lin_25937/article/details/127795340

版权

微信小程序的以开发快，能使用微信的api接口，快速发展。竞品：有支付宝，钉钉，抖音，头条，美团小程序等

1 模板语法

常用的标签有：,

文本渲染：{{msg}}，只要有变量的存在就要{{}}，可以识别大多数的javascript语法
条件渲染;wx:if ,wx:elif ,wx:else ,
列表渲染 wx:for ,他会自动生成像vue的item和index ，用法：wx:for={{list}},，也可以自定义渲染wx:for-item = “myitem” ,index也是一样，渲染就可以通过{{myitem}}

4.模板语法和引入的方法,然后再要引入的页面再席上tenplate标签，通过is属性来判断引入的具体哪一个
也可以引入非模板的模板块，通过include
模板的传参

2事件

1.bindinput输入事件，bindcomfirm确认事件(按回车确认)，bindtap点击事件
2.获取事件的参数(传参)：e.target.dataset.msg
3.传参：data-变量=“” 在方法中接收用：e.target.dataset.变量名在这里插入图片描述

3表单

更新数据与视图：this.setData({k:v})
获取表单的值：e.detail.value
获取事件的参数：e.target.dataset.msg
表单的双向绑定（bindinput事件）在这里插入图片描述

4 页面切换

1.组件跳转： navigator>
属性：
url ，
open-type打开类型（navigate普通跳转，具体在官网组件导航里边）
它的open-type属性有：
2.内置的api实现跳转
wx.navigateTo跳转
wx.switchTab 切换dibulan
wx.redirect 重定向
wx.reLaunch 重启在这里插入图片描述

5.页面传参

小程序页面传参主要通过查询传参
传：url=“xxxx/xxx?name=mumu&age=18”
接收：接收：onLoad options参数接收。options.name
options.age 在这里插入图片描述

6 对request的封装

const URI = {
  baseURL:"http://dida100.com"
}
function tansParam(obj){
  var str ="";
  for(var k in obj){
    str+=k +"="+obj[k]+"&";
  }
  //移除最后一个&
  return str.slice(0,-1)
}

function request(option){
  var url = option.url
  url=url.startsWith("http")?url:URI.baseURL+url
  if(option.params){
    url+="?"+tansParam(option.params)
  }
  var header = option.header||{}
  header.Authorization = "Bearer "+wx.getStorageSync("token")
  if(option.loading){
    wx.showToast({
      title: option.loading.title,
      icon:option.loading.icon,
    })
  }
  return new Promise((resolve,reject)=>{
    wx.request({
      url:url,
      method:option.method||"GET",
      data:option.data,
      header,
      success(res){
        resolve(res.data)
      },
      fail(err){
        wx.showToast({title:"加载失败",icon:"none"})
        reject(err)
      },
      complete(){
        wx.hideToast();
      }
    })
  })
}
//定义get简易方法
request.get = (url,config)=>{
  return request({url,method:"get",...config})
}
request.post = (url,data,config)=>{
  return request({url,method:"post",data,...config})
}
//导出requset
module.exports={request}