一：微信小程序跳转到H5
第一步： 图片所在wxml页面，找到需要点击跳转的图片标签，绑定事件并利用data-传参， 例如在标签中加入data-url="{{path}}" bindtap="go"。
第二步： 图片所在js页面，绑定事件内容
data: {
path: '此处写地址'
},
go: function ({currentTarget}) {
wx.navigateTo({
get方式的请求地址字符串拼接
url: '/pages/link/link?url='+currentTarget.dataset.url,
})
复制代码
},
第三步：
新建link页面。\
第四步：
在link.wxml页面加入web-view标签来展示H5页面。
<web-view src="{{url}}"></web-view>
第五步：
在link.js页面书写如下代码：\
data: {
url: ''
},
onLoad: function (options) {
this.setData({
url: options.url
})
复制代码
},
二：微信小程序获取后台数据
小程序发起 HTTPS 网络请求
wx.request({
url: 'example.php', //后台接口地址
method:'', //默认为GET
data: {
x: '', //后台需要的数据传参
y: ''
},
header: {
'content-type': 'application/json' // 请求头
},
success:(res)=> {
console.log(res.statusCode) 打印状态码 200请求成功
}
})
复制代码
简易登录界面传参 登录后台获得数据
<input type="text" class="ipt" bindinput="userChange" placeholder="请输入邮箱账号" />
<input type="password" class="ipt" bindinput="pwdChange" placeholder="请输入密码"/>
data: {
valueVal: "",
pwdVal: "",
},
userChange(e) {
this.setValue(e, 'valueVal') //通过bindinput方法获取input内的值
},
pwdChange(e) {
this.setValue(e, 'pwdVal') //封装函数
},
setValue(event, key) {
this.data[key] = event.detail.value
},
在上面代码里把获取到值进行传参
formInto() {
if (!this.data.valueVal || !this.data.pwdVal) {
wx.showToast({
title: '输入项不能为空', //非空校验
icon: 'error'
})
return
}
wx.request({
url: '', //真实的接口地址
method: "post",
data: {
email: this.data.valueVal, //传入获取到的值值
password: this.data.pwdVal
},
success: (res) => {
console.log(res.statusCode) 打印状态码 200请求成功 登录成功
if (res.statusCode == 200) {
let {
data: {
access_token 获取令牌
}
} = res;
wx.setStorageSync('token', access_token)
wx.showToast({
title: '登录成功',
icon: "success"
})
setTimeout(() => {
wx.switchTab({
url: '/pages/dom1/dom1',
})
}, 1000);
return
} else {
wx.showToast({
title: '登录不成功',
icon: "error"
})
return
}
}
})
},
```
