会员管理小程序实战开发07-页面跳转

原创

韩锴

发布于 2022-02-16 10:55:36

6010

发布于 2022-02-16 10:55:36

文章被收录于专栏：低代码从入门到精通低代码从入门到精通

上一节我们介绍了低代码中的生命周期函数和自定义方法，本节我们介绍一下低代码中的页面跳转。

页面跳转

低代码中实现页面跳转比较简单，直接给组件添加行为，调用平台的跳转方法即可。打开应用的编辑器，选中我们设置的按钮组件，修改一下组件的文本内容。

按钮文本内容修改好之后我们可以给按钮添加行为，设置为点击后跳转到页面。为了设置目标页面我们可以先创建两个页面，商家端的首页和顾客端的首页。点击左上角的+号创建新页面，输入页面名称和标识。

页面创建好之后我们就可以设置点击事件了。选中按钮组件，在右侧的属性面板找到行为。点击点击时，在弹出的界面选择页面跳转，设置跳转的页面即可

获取用户openid

我们上述的跳转逻辑只是实现了页面的跳转，在跳转之前我们先需要获取用户的openid。结合前边我们介绍的基础知识，需要在小程序启动的时候调用自定义连接器来获取openid。

在左上角点击菜单栏，选择低代码编辑器

/**
 * 可通过 app 获取或修改全局应用的 变量 状态 等信息
 * 具体可以console.info 在编辑器Console面板查看更多信息
 * 如果需要 async-await，请在方法前 async 
 **/ 
export default {
  async onAppLaunch(launchOpts) {
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    const result = await app.cloud.callConnector({
        name: 'getopenid_dopqiuw',
        methodName: 'getopenid',
        params: {}, // 方法入参
    });
    console.log(result)
  },
  onAppShow(appShowOpts) {
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}

保存后，我们可以看到控制台已经输出了appid，openid是需要在小程序里生效

现在有个问题是获取后的openid要存到哪里去呢？我们可以定义一个全局变量用来存放。点击导航条的变量，创建一个全局变量openid

变量定义好之后我们可以复制变量的路径，在生命周期函数里进行赋值即可

最终的代码：

/**
 * 可通过 app 获取或修改全局应用的 变量 状态 等信息
 * 具体可以console.info 在编辑器Console面板查看更多信息
 * 如果需要 async-await，请在方法前 async 
 **/ 
export default {
  async onAppLaunch(launchOpts) {
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    const result = await app.cloud.callConnector({
        name: 'getopenid_dopqiuw',
        methodName: 'getopenid',
        params: {}, // 方法入参
    });
    console.log(result)
    app.dataset.state.openid = result.openid
    console.log(app.dataset.state.openid)
  },
  onAppShow(appShowOpts) {
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}

如何查看具体的效果呢？点击导航条的发布按钮，选择发布成体验版的小程序即可