微信小程序双标签怎么打开

微信小程序双标签怎么打开,第1张

微信小程序的双标签模式是一种方便的多任务浏览模式。通过双标签模式,你可以在同一屏幕内同时打开两个不同的小程序,实现多任务浏览和 *** 作。

要使用微信小程序双标签模式,可以按照以下步骤进行 *** 作:

1. 打则悄开微信并进入小程序界面。

2. 点击右上角的“+”号,选择第一个小程序并进入。基旅

3. 在第一个小程序中,向上滑动屏幕,并点击“添加标签页”按钮(图标为“+”和“⦁”组成),再选择要打开的第二个小程序。

4. 此时,第二个小程序就会在新的标签页中打开,你可以在同一屏幕上同时浏览和 *** 作两个小程序了。

5. 如果需要关闭某个标签页,可以点击标签页上的“×”按钮来关闭。

需要注意的是,并不是所有的微信小程序都支持双标签模式。如果你发现在某些小程序中没有“添加标签页”按钮,则该小程序可能不支持双标签模式搏盯凳。同时,在双标签模式下,你需要注意你的设备屏幕大小和分辨率,以避免 *** 作不便或界面拥挤的情况发生。

到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/12525524.html

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

发表评论

登录后才能评论

评论列表(0条)

保存