微信小程序 通过onshow获取options的参数

微信小程序 通过onshow获取options的参数,第1张

现在的小程序获取options值的话,最简单的方式,就是使用 onLoad(生命周期函数--监听页面加载) 来获取了

但是有的时候 需要使用 onShow(生命周期函数--监听页面显示) 来获取 options ,这个时候就获取不到options 值

打印options 会显示   undefined

如何在onshow中获取 options值

首先获取小程序的页面栈

什么是小程序的页面栈,了解一下

举例 :如果一个网页,你一直点击链接 ,就会一直跳转,(前提没有打开新的页面),你每打开一个页面,就会向页面栈中引入一个当前页面,就形成了一个栈结构,可以从当前的页面,一直返回到第一个页面.

同理,小程序也是存在栈结构的,小程序的栈解构,是有限制,最大长度只有10,只保存10个,如果超出10个,就会把第一个页面,释放掉

1. getCurrentPages( ) 获取页面栈

注意

一定要从传递参数的页面跳转过来, 注意

我个人的 :传递参数页面是pages/user/user/  ,点击跳转的是pages/order/order, 

打印结果

打印出来是一个数组, 其中有标记着自己现在哪一个页面的路径"_route_",找到当前的页面路径  options就在其中   

注意:我个人传递的参数 是tyoe = 1  传递参数页面是pages/user/user/  ,跳转的是pages/order/order,  所以options是在pages/order/order中的,也就是数组的下标为1的

 2. 获取 options 中的参数

这样就获取到传递的参数了

希望帮助到各位小白了

到demo1-listde的demo1-listde.wxml添加输入框和添加按钮

商品

<input bindinput="getName"></input>

商品价格

<input bindinput="getPrice"></input><!-- 输入框 -->

<button bindtap="addGood" type="primary">添加商品</button><!-- 添加按钮 -->

1

2

3

4

5

1

2

3

4

5

到demo1-listde的demo1-listde.wxss添加输入框和添加按钮的衡大样式

input{

border: 1px solid gray/* 1像素,实心,灰色 */

width: 200px

}

1

2

3

4

1

2

3

4

保存运行则得到

在这里插入图片描述

2.到demo1-listde的demo1-listde.js

在页面顶端设置全局模式

let name = ''

let price = ''

1

2

1

2

获取用户输入的商品名和价格

getName(n) {

name= n.detail.value

},

getPrice(n) {

price= n.detail.value

},

1

2

3

4

5

6

1

2

3

4

5

6

把用户添加的商品添加到数据库

addGood() {

console.log('商品名', name)

console.log('商品价格', price)

1

2

3

1

2

3

为了避免代码重复

把下图请添加图片描述

改为

getList(){

wx.cloud.database().collection("goods")

.get()

.then(res=>{

console.log('列表请求唤团成功',res)

this.setData({//把请求的数据赋值给list

list:res.data

})

})

.catch(res=>{

console.log('列表请求失败',err)

})

1

2

3

4

5

6

7

8

9

10

11

12

1

2

3

4

5

6

7

8

9

10

11

12

为添加商品制作一个成功或失败提示d窗

if (name == '') {

wx.showToast({//提示d窗

icon:'none',

title: '商品名为空',

})

} else if (price == '') {

wx.showToast({//提示d窗

icon:'none',

title: '价格为空',

})

} else{

console.log('请添加商品')

wx.cloud.database().collection('goods')

.add({

data:{

name: name,

price: price

}

})

.then(res =>{

console.log('添加成功',res)

this.getList()

})

.catch(res =>{

console.log('添加失败',err)

})

}

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

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

保存运行即可在小程序页面添加商品和价格

更改商品价格

1,到demo1.1-details的和拦橘demo1.1-details.wxml添加输入框和添加按钮

<view>商品名:{{good.name}},价格:{{good.price}}</view><!-- viem默认有换行的效果 -->

更新商品价格

<input bindinput="getPrice"></input>

<button type="primary" bindtap="update">更新商品价格</button>

1

2

3

4

1

2

3

4

到demo1.1-details的demo1.1-details.wxss添加输入框和添加按钮的样式

input{

border: 1px solid gray

width: 200px

}

1

2

3

4

1

2

3

4

保存运行得到

在这里插入图片描述

2.到demo1.1-details的demo1.1-details.js

在页面顶部添加全局模式

let price = ''

var id = ''

1

2

1

2

把onLoad板块改为

onLoad(options) {//列表携带的数据,传递到了onload方法里

console.log('列表携带的值',options)

id = options.id

this.getDetail()

}

1

2

3

4

5

1

2

3

4

5

为避免下面代码出现重复

把下图的代码

在这里插入图片描述

改为

getDetail() {

wx.cloud.database().collection('goods')

.doc(id)

.get()

.then(res=>{

console.log('精品课程详情页请求成功',res)

this.setData({

good:res.data

})

})

.catch(res=>{

console.log('精品课程详情页请求失败',err)

})

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

1

2

3

4

5

6

7

8

9

10

11

12

13

14

获取新价格

getPrice(n) {

price=n.detail.value

}

1

2

3

1

2

3

修改商品的价格

update() {

console.log('新的商品价格',price)

if (price == '') {

wx.showToast({

icon:'none',

title: '价格为空',

})

} else {

wx.cloud.database().collection('goods')

.doc(id)

.update({

data:{

price:price

}

})

.then(res =>{

console.log('更新成功',res)

this.getDetail()

})

.catch(res =>{

console.log('更新失败',err)

})

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

保存运行即可更改商品的价格

删除商品

1,到demo1.1-details的demo1.1-details.wxml添加删除按钮

<button type='primary' bindtap="delete">删除当前商品</button>

1

1

2,到demo1.1-details的demo1.1-details.js

添加删除商品的代码

delete() {

console.log('点击了删除键',id)

wx.showModal({

title:'提示',

content:'确定要删除这个商品吗',

success(res) {

if (res.confirm) {

console.log('确定')

//从数据库删除数据

wx.cloud.database().collection('goods')

.doc(id)

.remove()

.then(res =>{

console.log('删除完成',res)

wx.navigateTo({

url: '/pages/demo1-list/demo1-list',

})

})

.catch(res=>{

console.log('删除失败',err)

})

}else if (res.cancel) {

console.log('取消')

}

}

})

}

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

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

保存运行即可

完成后的全部代码

demo1-list.js

let name = ''

let price = ''

Page({

onLoad(){

this.getList()

},

//获取列表数据

getList(){

wx.cloud.database().collection("goods")

.get()

.then(res=>{

console.log('列表请求成功',res)

this.setData({//把请求的数据赋值给list

list:res.data

})

})

.catch(res=>{

console.log('列表请求失败',err)

})

},

//跳转到精品课程详情页

toDetail(n) {

console.log('跳转到精品课程详情页的id',n.currentTarget.dataset.id)

wx.navigateTo({

url: '/pages/demo1.1-details/demo1.1-details?id=' + n.currentTarget.dataset.id,//跳转到商品详情页,并携带商品id

})

},

//获取用户输入的商品名和价格

getName(n) {

name= n.detail.value

},

getPrice(n) {

price= n.detail.value

},

//添加商品到数据库

addGood() {

console.log('商品名', name)

console.log('商品价格', price)

if (name == '') {

wx.showToast({//提示d窗

icon:'none',

title: '商品名为空',

})

} else if (price == '') {

wx.showToast({//提示d窗

icon:'none',

title: '价格为空',

})

} else{

console.log('请添加商品')

wx.cloud.database().collection('goods')

.add({

data:{

name: name,

price: price

}

})

.then(res =>{

console.log('添加成功',res)

this.getList()

})

.catch(res =>{

console.log('添加失败',err)

})

}

}

})

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

71

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

71

demo1-list.wxml

商品名

<input bindinput="getName"></input>

商品价格

<input bindinput="getPrice"></input><!-- 输入框 -->

<button bindtap="addGood" type="primary">添加商品</button><!-- 添加按钮 -->

<view wx:for="{{list}}">

<view bindtap="toDetail" data-id="{{item._id}}">商品名:{{item.name}},价格:{{item.price}} </view>

</view>

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

demo1-list.wxss

input{

border: 1px solid gray/* 1像素,实心,灰色 */

width: 200px

}

1

2

3

4

1

2

3

4

demo1.1-details.js

let price = ''

var id = ''

Page({

data:{

good:{}

},

onLoad(options) {//列表携带的数据,传递到了onload方法里

console.log('列表携带的值',options)

id = options.id

this.getDetail()

},

//获取商品的数据

getDetail() {

wx.cloud.database().collection('goods')

.doc(id)

.get()

.then(res=>{

console.log('精品课程详情页请求成功',res)

this.setData({

good:res.data

})

})

.catch(res=>{

console.log('精品课程详情页请求失败',err)

})

},

//获取新价格

getPrice(n) {

price=n.detail.value

},

//修改商品价格

update() {

console.log('新的商品价格',price)

if (price == '') {

wx.showToast({

icon:'none',

title: '价格为空',

})

} else {

wx.cloud.database().collection('goods')

.doc(id)

.update({

data:{

price:price

}

})

.then(res =>{

console.log('更新成功',res)

this.getDetail()

})

.catch(res =>{

console.log('更新失败',err)

})

}

},

delete() {

console.log('点击了删除键',id)

wx.showModal({

title:'提示',

content:'确定要删除这个商品吗',

success(res) {

if (res.confirm) {

console.log('确定')

//从数据库删除数据

wx.cloud.database().collection('goods')

.doc(id)

.remove()

.then(res =>{

console.log('删除完成',res)

wx.navigateTo({

url: '/pages/demo1-list/demo1-list',

})

})

.catch(res=>{

console.log('删除失败',err)

})

}else if (res.cancel) {

console.log('取消')

}

}

})

}

})

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

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

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

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

demo1.1-details.wxml

<!--pages/demo1.1-details/demo1.1-details.wxml-->

<view>商品名:{{good.name}},价格:{{good.price}}</view><!-- viem默认有换行的效果 -->

更新商品价格

<input bindinput="getPrice"></input>

<button type="primary" bindtap="update">更新商品价格</button>

<button type='primary' bindtap="delete">删除当前商品</button>

demo1.1-details.wxss


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12226945.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-22
下一篇 2023-05-22

发表评论

登录后才能评论

评论列表(0条)

保存