实现跳转H5需要用到小程序的web-view(因为外部h5无法跳转到小程序,因此需要把h5内嵌到小程序的web-view中)
web-view:承载网页的容器。会自动铺满整个小程序页面。
src属性:指向网页的链接。可打开关联的公众号的文章(其它网页需登录小程序管理后台配置业务域名)
第一步:
给image添加点击事件go
<swiper indicator-dots circular autoplay>
<swiper-item wx:for="{{imageList}}" wx:key="index">
<image style="width: 100%;" bindtap="go" src="{{item.image}}"
data-path="{{item.path}}"
></image>
</swiper-item>
</swiper>
第二步:
设置跳转lianjie页面
go:function(e){
let {currentTarget:{dataset:{path}}} = e;
wx.navigateTo({
url: '/pages/lianjie/lianjie?url=' + path, }) }
第三步:
创建lianjie页面,使用web-view
<web-view src="{{url}}"></web-view>
第四步:
设置url值为空,获取点击图片所对应的链接地址
data: {
url:''
},
onLoad: function (options) {
console.log(options);
this.setData({
url:options.url }) }
注册页面 html部分
<!--pages/register/register.wxml-->
<view class="flex row">
<view class="label">昵称:</view>
<input placeholder="请输入昵称" bindinput="nichenCtrl"/>
</view>
<view class="flex row">
<view class="label">邮箱:</view>
<input placeholder="请输入邮箱" bindinput="emailCtrl"/>
</view>
<view class="flex row">
<view class="label">密码:</view>
<input type="password" placeholder="请输入密码" bindinput="pwdCtrl"/>
</view>
<view class="flex row">
<view class="label">确认密码:</view>
<input type="password" placeholder="请确认密码" bindinput="repwdCtrl"/>
</view>
<view style="text-align: center;">
<button plain type="primary" style="width:150px;" bindtap="registerCtrl">注册</button>
</view>
复制代码
js部分
Page({
/**
* 页面的初始数据
*/
data: {
nichen: '',
email: '',
pwd: '',
repwd: ''
},
nichenCtrl: function (e) {
this.setValue(e, 'nichen')
},
emailCtrl: function (e) {
this.setValue(e, 'email')
},
pwdCtrl: function (e) {
this.setValue(e, 'pwd')
},
repwdCtrl: function (e) {
this.setValue(e, 'repwd')
},
setValue: function (event, keyName) {
let {
detail: {
value
}
} = event;
/* keyName是变量所以要使用中括号 */
this.setData({
[keyName]: value
})
},
registerCtrl: function () {
if (!this.data.nichen || !this.data.email || !this.data.pwd || !this.data.repwd) {
wx.showToast({
title: "输入不能为空",
icon: "error"
})
return
}
wx.request({
method:'POST',
url: 'https://api.shop.eduwork.cn/api/auth/register',
data: {
name:this.data.nichen,
email:this.data.email,
password:this.data.pwd,
password_confirmation:this.data.repwd
},
success:(res)=>{
if(res.data&&res.data.status_code==422){
wx.showToast({
title: '注册失败',
icon:'error'
})
}else{
wx.showToast({
title: '注册成功',
icon:'success'
})
setTimeout(()=>{
wx.navigateTo({
url: '/pages/login/login',
})
},1000)
}
}
})
},