微信小程序的基础使用

一、基本语法

小程序的模板语法约等于vue的模板语法

1，文本渲染

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

2，条件渲染

wx:if=""
wx:elif=""
wx:else

3，列表渲染

wx:for="{{list}}"
wx:key="index"
	{{item}}
	{{index}}

4，自定义列表渲染

定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

5，导入
（不常用）

import
只能导入template内容
template/utils.wxml
< template name=“userCart”> 用户名：{{name}} < /temlate>
home.wxml
< import src=“/template/utils.wxml”>
< tempate is=“userCart” data=“{{…u1}}”>

include
只能导入非template内容
template/foot.wxml < view> {{内容}} </ view>
home.wxml < include src=“/template/foot.wxml”>

6，wxss
默认单位是rpx
750rpx 等于一个屏幕的宽
375就是50%的宽

7，事件
bindInput     表单输入时
bindconfirm    表单输入确认
bindtap      点击时候

8，内置组件
bindInput     表单输入时
bindconfirm    表单输入确认
bindtap      点击时候

9，事件的传参
<button data-msg="xxx" bindtap="tapHd">
获取事件的参数  e.target.dataset.msg

10，表单的绑定

<input value="{{s1}}" bindinput="inputHd">
inputHd(e){
 this.setData({s1:e.detail.value})
}
表单的值获取：e.detail.value
 

6，内置的api

显示提示

• showToast

本地存储

• wx.setStorageSync(key,value)

本地取

• wx.getStorageSync(key)
• wx.request 网络请求

7，生命周期

onLoad 							页面加载完毕
onPullDownRefresh 				下拉刷新
onReachBottom					 触底更新

13 、封装request

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

8、方法跳转页面

//<!**wxml文件**>
<view class="select_calculator" bindtap="next_calculator">
//js文件
next_calculator:function () {
    wx.navigateTo({
      url: '/pages/calculator/calculator',
    })
 

9、方法返回几级目录

cancel() {
				uni.navigateBack({
					delta:1
				})
			},