如何导入微信小程序Demo

如何导入微信小程序Demo,第1张

导语:关于小程序的上线节奏:本次内测采用邀请制,其内容客户端暂时对用户不可见。之后小程序会全面开放申请,所有小程序将在统一时间向用户开放。小程序是一种不需要下载安装即可使用的'应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。

如何导入微信小程序Demo

打开“微信web开发者工具” -->添加项目-->填写AppID(随便填)、项目名称(随便填),选择本地开发目录(Demo存放地址)-->点击“添加项目” 即可

配图:

小Demo走起!

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/sjk/10017309.html

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

发表评论

登录后才能评论

评论列表(0条)

保存