美文网首页
小程序——最常用

小程序——最常用

作者: 水君子Z | 来源:发表于2019-03-21 09:33 被阅读0次
1.所有的块级元素用:
<view>内容</view>

2.所有文字用:
<text>文字</text>

3.for循环是这样的:
<view wx:for="{{list}}" wx:key="{{index}}">{{item}}</view>

4.if判断是这样的:
<view wx:if="{{state == 1}}">1</view>
<view wx:elif="{{state == 2}}">2</view>
<view wx:else>其他</view>

5.点击事件和参数传递:
Wxml:
<view wx:for="{{list}}" wx:key="{{index}}" data-id="{{item.id}}" bindtap="clickView">{{item.id}}</view>

Js:
Page({
  data: {
    list: [{ id: 22 }, { id: 33 }]  
  },
  clickView(item){
    console.log(item.currentTarget.dataset.id)
  },
})

6.跳转路由:
跳转tab(无法在链接后携带参数):
wx.switchTab({
  url:'../read/index'
});

跳转非tab并携带参数:
wx.navigateTo({
  url: '../goods/index?id=' + id,
})

获取跳转携带的参数
在跳转后的页面的onLoad 钩子
onLoad: function (options) {
  console.log(options.id)
},


7.全局变量:
添加
app.js
globalData:{
  number: 2,
}
在指定js中获取
var number = getApp().globalData.number;

8.储存数据:
同步
储存数据
wx.setStorageSync('id', id);
移除储存数据
wx.removeStorageSync('id');
获取储存数据
wx.getStorageSync('id');
清除储存数据
wx.clearStorageSync();

异步
储存数据
wx.setStorage('id',id);
移除储存数据
wx.removeStorage('id');
获取储存数据
wx.getStorage('id');
清除储存数据
wx.clearStorage();

9.接口请求:
wx.request({
  url: url,
  header: '',
  data: data,
  method: 'POST'|'GET', 
  success: function (res) {
    resolve(res);
  },
  fail: function () {
    reject();
  }, 
});

10.Promise封装请求:
GET:
host = "http://192.168.4.144:8888"
function fetch(url) {
  return new Promise(function(resolve,reject){
    wx.request({
      url:host+url,
      method:'GET',
      success:function (res) {
        resolve(res);
      },
      fail:function(res) {
        reject(res) 
      }
    })
  })
}
调用GET:
fetch("/login").then(function(res){}).catch(function(res){})

POST:
function post(url,data) {
  return new Promise(function(resolve,reject){
    wx.request({
      url: host + url,
      header: '{ "content-type": "application/json;charset=UTF-8" }',
      data: data,
      method: 'POST', 
      success: function (res) {
        resolve(res);
      },
      fail: function () {
        reject();
      }, 
    })
  });
};
调用POST:
Post("/add/user",data).then(function(res){}).catch(function(res){})

相关文章

网友评论

      本文标题:小程序——最常用

      本文链接:https://www.haomeiwen.com/subject/ekbfvqtx.html