• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序-Request|路由跳转|本地存储

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

Request

官方文档

wx.request相当于发送ajax请求

参数

属性类型默认值必填说明
url string   开发者服务器接口地址
data string/object/ArrayBuffer   请求的参数
header Object   设置请求的 header,header 中不能设置 Referer。content-type 默认为 application/json
method string GET HTTP 请求方法
dataType string json 返回的数据格式
responseType string text 响应的数据类型
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行

object.dataType 的合法值

说明
json 返回的数据为 JSON,返回后会对返回的数据进行一次 JSON.parse
其他 不对返回的内容进行 JSON.parse

object.success 回调函数

参数

Object res

属性类型说明
data string/Object/Arraybuffer 开发者服务器返回的数据
statusCode number 开发者服务器返回的 HTTP 状态码
header Object 开发者服务器返回的 HTTP Response Header

eg:

小程序:

test.wxml
<!--request-->
<button bind:tap=\'req\'>点击</button>
test.js
Page({
  req:function(){
    wx.request({
      url: \'http://127.0.0.1:8000/test/\',  // 路径
      data:{\'name\':\'xionger\'},  // 数据
      method:\'POST\',  // 请求方式
      header: { "content-type": "application/json"},  // 请求头
      // 回调函数
      success:function(res){
        console.log(res)  // 回调数据
      }
    })
  },    

后端 django

urls.py
url(r\'^test/\', views.Test.as_view()),
views.py
from rest_framework.views import APIView
from rest_framework.response import Response
class Test(APIView):
    def post(self, request):
        request_data = request.data
        print(request_data)
        return Response({\'code\':200, \'msg\': \'ok\'})

小程序路由跳转

官方文档

wx.switchTab

1.跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
2.不能携带数据
这里的tabBar是底下的导航栏指定的页面,

参数

属性类型默认值必填说明
url string   需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar字段定义的页面),路径后不能带参数。
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行

eg:

test.wxml
<button bind:tap="click">switchTab</button>
test.js
Page({
click:function(){
    //必须是tabBar页面,不能携带参数
    wx.switchTab({
      url: \'/pages/index/index\',  // tabBar中的页面路径
    })
  },
})

wx.reLaunch

1.关闭所有页面,打开到应用内的某个页面
2.跳转url中可携带拼接数据

参数

属性类型默认值必填说明
url string   需要跳转的应用内页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 \'path?key=value&key2=value2\'
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)

eg

test.js
click:function(){
var name = "123";
    wx.reLaunch({ 
     url: "/pages/test3/test3?name="+name
  })
}

wx.redirectTo

1.关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
2.跳转url中可携带拼接数据

参数

属性类型默认值必填说明
url string   需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 \'path?key=value&key2=value2\'
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)

eg

test.js
wx.redirectTo({
  url: \'test?id=1\'
})

wx.navigateTo

1.保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。
小程序中页面栈最多十层
2.跳转url中可携带拼接数据

参数

属性类型默认值必填说明
url string   需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 \'path?key=value&key2=value2\'
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)

eg

click:function(){
    //必须是tabBar页面,可携带数据
    wx.navigateTo({
      url: "/pages/test3/test3?name=haha"
    })
  },

补充

test.exml
<navigator url="/pages/test2/test2" >跳转到新页面</navigator>

存储数据到本地以及本地获取数

官方文档

wx.setStorageSync 同步存储

test.wxml
<!--本地存储-->
<button bind:tap="cun">存</button>

<button bind:tap="qu">取</button>
test.js
Page({
cun: function () {
    wx.setStorageSync(\'key\', \'data\')
  },
 qu: function () {
    console.log(wx.getStorageSync(\'key\'))
    wx.clearStorageSync("key")  // 删除本地存储的key值

  },
})

wx.setStorage 异步存储

属性类型默认值必填说明
key string   本地缓存中指定的 key
data any   需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

wx.setStorage({
  key: \'key\',
  data: \'value\'
})

try {
  wx.setStorageSync(\'key\', \'value\')
} catch (e) { }

上面的两个就是一个是同步的一个是异步的,还是有区别的,想用哪一个看你的业务来定

注 : 摘自 小猿取经

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序绑定数据发布时间:2022-07-18
下一篇:
转载:移动端+微信小程序实现,手机端滑动分页代码思路(ajax) ...发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap