小程序开发 事件、跳转、传参取参、http、数据绑定和渲染

js引入:

const util =require('../../utils/util.js')

获取全局对象和方法:

const app = getApp()

事件:

1、key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。

跳转:

页面和tabBar之间跳转:

wx.switchTab({

url:'../index/index'

});

页面之间跳转方法:

1、保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

wx.navigateTo({   新页面会有返回按钮

url:'../logs/logs?key=value&key2=value2' //传参

,

success: function(res){

// success

},

fail: function() {

// fail

},

complete: function() {

// complete

}

})

2、wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

wx.redirectTo({   新页面不会有返回按钮

url:'../index/index',

,

success: function(res){

// success

},

fail: function() {

// fail

},

complete: function() {

// complete

}

})

3、x.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。如果 delta 大于现有页面数,则返回到首页。

varpages = getCurrentPages()varnum = pages.length

navigateBack:function(){wx.navigateBack({

delta: num

})

}

页面跳转也可直接用 url:

跳转到新页面

在当前页打开新页面


如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串然后传递,接收到之后要用JSON.parse()转换。.

取参:

Page({

onLoad:function(options) {

this.setData({       //用于给data中的变量赋值

title: options.key

})

}

})

数据绑定:

数据绑定使用 Mustache 语法(双大括号)将变量包起来。

内容:{{message}}

控制属性:

关键字:

...

http:(微信公众号和小程序上线的话都必须是https请求,小程序接口不允许ip和端口号)

wx.request({ 

 url:'test.php',//仅为示例,并非真实的接口地址

data: { x:'', y:''},

 header: {'content-type':'application/json、默认值、或者、、'application/x-www-form-urlencoded'// }, 

method:'GET/POST',

 success:function(res){console.log(res.data) }

})

APP.JSON(tabBar)

{

"pages":[

"pages/index/index",

"pages/tucao/tucao",

"pages/center/center"

],

"window":{

"backgroundTextStyle":"",

"navigationBarBackgroundColor":"red",

"navigationBarTitleText":"一个标题而已",

"navigationBarTextStyle":"white"

},

"tabBar": {

"list": [{

"pagePath":"pages/index/index",

"text":"首页",

"iconPath":"/images/public/menu-cd.png",

"selectedIconPath":"/images/public/menu.png"

},{

"pagePath":"pages/tucao/tucao",

"text":"吐槽",

"iconPath":"/images/public/hot-cd.png",

"selectedIconPath":"/images/public/hot.png"

},{

"pagePath":"pages/center/center",

"text":"我的",

"iconPath":"/images/public/center-cd.png",

"selectedIconPath":"/images/public/center.png"

}],

"borderStyle":"white"

}

}

你可能感兴趣的:(小程序开发 事件、跳转、传参取参、http、数据绑定和渲染)