小程序登录跳转页面

250 阅读1分钟

实现跳转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)
                }
            }
        })
    },