程序开发中分享页面后返回首页的实现方式

why 282 2024-08-30

这次给大家带来小程序开发分享页面后返回首页,的注意事项有哪些,下面就是实战案例,一起来看一下。

做小程序开发发现,页面分享出去后,用户通过分享进去的页面很难找到返首页的情况。(微信官方操作是点击右上角三个点,在手机下方显示返回首页)。民间很多方案是自己在页面加个悬浮Home标注。

今天我分享另外一种方法。请看下面.gif;

有没有发现,左上角有返回按钮了。原理简单,在你要分享的页面,分享配置时配置你的首页,并带上对应的参数,在首页 onLoad方法中可以获取。代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

<!--index.wxml-->

<view><text>我是首页</text>

 <button>go logsPage</button>

</view>

const app = getApp()

Page({

 data: {

  motto: 'Hello World',

  userInfo: {},

  hasUserInfo: false,

  canIUse: wx.canIUse('button.open-type.getUserInfo')

 },

 //事件处理函数

 goLogs: function() {

  wx.navigateTo({

   url: '/pages/logs/logs'

  })

 },

 onLoad: function (options) {

  console.log(options)

  if (options.share_query){

   wx.showLoading({

    title: '我是从分享页面进入的',

   })

   setTimeout(function () {

    wx.hideLoading()

    wx.navigateTo({

     url: '/pages/logs/logs',

    })

   }, 2000)

   

  }

  }

  

})

<!--logs.wxml-->

<view>

 <block>

  <text>{{index + 1}}. {{log}}</text>

 </block></view>

const app = getApp()

Page({

 data: {

  motto: 'Hello World',

  userInfo: {},

  hasUserInfo: false,

  canIUse: wx.canIUse('button.open-type.getUserInfo')

 },

 //事件处理函数

 goLogs: function() {

  wx.navigateTo({

   url: '/pages/logs/logs'

  })

 },

 onLoad: function (options) {

  console.log(options)

  //判断是否分享进入

  if (options.share_query){

   wx.showLoading({

    title: '我是从分享页面进入的',

   })

   setTimeout(function () {

    wx.hideLoading()

    wx.navigateTo({

     url: '/pages/logs/logs',

    })

   }, 2000)  

  }

  

})

相信看了本文案例你已经掌握了方法。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序中如何实现动态绑定类名的方法
下一篇:微信小程序开发里实现搜索内容高亮功能的途径
相关文章

 发表评论

暂时没有评论,来抢沙发吧~