微信小程序同步微信公众号文章(二)

微信小程序同步微信公众号文章(二),第1张

首先确认是否有相应的接口权限,这里主要用到获取素材相关的接口,可以看到对应接口文档,个人号还是有对应权限的。

在新增了永久素材后,开发者可以分类型获取永久素材的列表:

1、获取永久素材的列表,也包含公众号在公众平台官网素材管理模块中新建的图文消息、语音、视频等素材 。

2、临时素材无法通过本接口获取。

3、调用该接口需>

如果要在 pageData 中显示多行数据,可以将其更改为一个数组,并在循环中将每个时间推入数组中。例如:

 let times = []; 

// 循环中 

let d = new Date(itemtimereplace(/-/g, '/'))getTime();

let time = timeHandle(d)

timespush(time); 

// 循环结束后 

thissetData({ 

pageData:times 

})

如果你要显示最新的时间那么可以在循环结束后使用unshift方法添加到数组的第一个位置

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

商品

<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-listdewxss添加输入框和添加按钮的样式

input{

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

width: 200px;

}

1

2

3

4

1

2

3

4

保存运行则得到

在这里插入描述

2到demo1-listde的demo1-listdejs

在页面顶端设置全局模式

let name = ''

let price = ''

1

2

1

2

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

getName(n) {

name= ndetailvalue

},

getPrice(n) {

price= ndetailvalue

},

1

2

3

4

5

6

1

2

3

4

5

6

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

addGood() {

consolelog('商品名', name)

consolelog('商品价格', price)

1

2

3

1

2

3

为了避免代码重复

把下图请添加描述

改为

getList(){

wxclouddatabase()collection("goods")

get()

then(res=> {

consolelog('列表请求成功',res)

thissetData({//把请求的数据赋值给list

list:resdata

})

})

catch(res=> {

consolelog('列表请求失败',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 == '') {

wxshowToast({//提示d窗

icon:'none',

title: '商品名为空',

})

} else if (price == '') {

wxshowToast({//提示d窗

icon:'none',

title: '价格为空',

})

} else{

consolelog('请添加商品')

wxclouddatabase()collection('goods')

add({

data:{

name: name,

price: price

}

})

then(res =>{

consolelog('添加成功',res)

thisgetList()

})

catch(res =>{

consolelog('添加失败',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,到demo11-details的demo11-detailswxml添加输入框和添加按钮

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

更新商品价格

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

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

1

2

3

4

1

2

3

4

到demo11-details的demo11-detailswxss添加输入框和添加按钮的样式

input{

border: 1px solid gray;

width: 200px

}

1

2

3

4

1

2

3

4

保存运行得到

在这里插入描述

2到demo11-details的demo11-detailsjs

在页面顶部添加全局模式

let price = ''

var id = ''

1

2

1

2

把onLoad板块改为

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

consolelog('列表携带的值',options)

id = optionsid

thisgetDetail()

}

1

2

3

4

5

1

2

3

4

5

为避免下面代码出现重复

把下图的代码

在这里插入描述

改为

getDetail() {

wxclouddatabase()collection('goods')

doc(id)

get()

then(res=> {

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

thissetData({

good:resdata

})

})

catch(res=>{

consolelog('精品课程详情页请求失败',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=ndetailvalue

}

1

2

3

1

2

3

修改商品的价格

update() {

consolelog('新的商品价格',price)

if (price == '') {

wxshowToast({

icon:'none',

title: '价格为空',

})

} else {

wxclouddatabase()collection('goods')

doc(id)

update({

data:{

price:price

}

})

then(res =>{

consolelog('更新成功',res)

thisgetDetail()

})

catch(res =>{

consolelog('更新失败',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,到demo11-details的demo11-detailswxml添加删除按钮

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

1

1

2,到demo11-details的demo11-detailsjs

添加删除商品的代码

delete() {

consolelog('点击了删除键',id)

wxshowModal({

title:'提示',

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

success(res) {

if (resconfirm) {

consolelog('确定')

//从数据库删除数据

wxclouddatabase()collection('goods')

doc(id)

remove()

then(res => {

consolelog('删除完成',res)

wxnavigateTo({

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

})

})

catch(res=>{

consolelog('删除失败',err)

})

}else if (rescancel) {

consolelog('取消')

}

}

})

}

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-listjs

let name = ''

let price = ''

Page({

onLoad(){

thisgetList()

},

//获取列表数据

getList(){

wxclouddatabase()collection("goods")

get()

then(res=> {

consolelog('列表请求成功',res)

thissetData({//把请求的数据赋值给list

list:resdata

})

})

catch(res=> {

consolelog('列表请求失败',err)

})

},

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

toDetail(n) {

consolelog('跳转到精品课程详情页的id',ncurrentTargetdatasetid)

wxnavigateTo({

url: '/pages/demo11-details/demo11-detailsid=' + ncurrentTargetdatasetid,//跳转到商品详情页,并携带商品id

})

},

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

getName(n) {

name= ndetailvalue

},

getPrice(n) {

price= ndetailvalue

},

//添加商品到数据库

addGood() {

consolelog('商品名', name)

consolelog('商品价格', price)

if (name == '') {

wxshowToast({//提示d窗

icon:'none',

title: '商品名为空',

})

} else if (price == '') {

wxshowToast({//提示d窗

icon:'none',

title: '价格为空',

})

} else{

consolelog('请添加商品')

wxclouddatabase()collection('goods')

add({

data:{

name: name,

price: price

}

})

then(res =>{

consolelog('添加成功',res)

thisgetList()

})

catch(res =>{

consolelog('添加失败',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-listwxml

商品名

<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}}">商品名:{{itemname}},价格:{{itemprice}} </view>

</view>

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

demo1-listwxss

input{

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

width: 200px;

}

1

2

3

4

1

2

3

4

demo11-detailsjs

let price = ''

var id = ''

Page({

data:{

good:{}

},

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

consolelog('列表携带的值',options)

id = optionsid

thisgetDetail()

},

//获取商品的数据

getDetail() {

wxclouddatabase()collection('goods')

doc(id)

get()

then(res=> {

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

thissetData({

good:resdata

})

})

catch(res=>{

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

})

},

//获取新价格

getPrice(n) {

price=ndetailvalue

},

//修改商品价格

update() {

consolelog('新的商品价格',price)

if (price == '') {

wxshowToast({

icon:'none',

title: '价格为空',

})

} else {

wxclouddatabase()collection('goods')

doc(id)

update({

data:{

price:price

}

})

then(res =>{

consolelog('更新成功',res)

thisgetDetail()

})

catch(res =>{

consolelog('更新失败',err)

})

}

},

delete() {

consolelog('点击了删除键',id)

wxshowModal({

title:'提示',

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

success(res) {

if (resconfirm) {

consolelog('确定')

//从数据库删除数据

wxclouddatabase()collection('goods')

doc(id)

remove()

then(res => {

consolelog('删除完成',res)

wxnavigateTo({

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

})

})

catch(res=>{

consolelog('删除失败',err)

})

}else if (rescancel) {

consolelog('取消')

}

}

})

}

})

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

demo11-detailswxml

<!--pages/demo11-details/demo11-detailswxml-->

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

更新商品价格

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

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

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

demo11-detailswxss

做一个查询的功能 可以根据id查到text 或者根据text查到id

附上数组如下

resultset: [{id:1,text:"aaa"},{id:2,text:"bbb"}, {id: 3,text: 'ccc'}, {id: 4,text: 'f'}]

之前尝试了一些方法 就像在传统语言那样遍历数组然后寻找相等的值 但是发现好像并不是特别好使

var resultSet =thisdataresultset

const length = resultSetlength var val = thisdatainputValue if(val){

consolelog(val) for(let i =0;i<=length;i++){ //consolelog(resultSet[i])

if(val == resultSet[i]id){

consolelo("找到了") var result = thisdataresultSet[i]id

consolelog("结果是"+result)

} else{

consolelog("没找到结果")

}

}

} else{

consolelog("没输入啊")

}

}

<view>父组件msg的值:{{msg}}</view>

<Header msg="{{msg}}" bindchildChange="change" ></Header>

<block wx:for="{{list}}" wx:key="index">

<ListItem rItem="{{item}}" bindchildGO="childGO"></ListItem>

</block>

<Header  msg="{{msg}}"></Header>

/ pages/list/listwxss /

item{

    padding: 5px;

}

img1{

    width: 120px;

    height: 120px;

    border-radius: 5px;

}

row{

    flex: 1;

    height: 120px;

}

title{

    padding: 10px;

}

dec{

    padding:0 10px;

}

// pages/list/listjs

Page({

    /

      页面的初始数据

     /

    data: {

        msg:"你是我的小宝贝",

     list:[{

         url:">

1 const getInf = (str, key) => strreplace(new RegExp(`${key}`, 'g'), `%%${key}%%`)split('%%');

2封装对应的方法

data 为需要匹配的数据  keyWord为关键字  seachName为数据中对应的对象名

seachRedText(data,keyWord,seachName){//查找关键字

    let that = this

              for (let i = 0; i < datalength; i++) {

                  let dic = data[i];

                  let newDic = data[i];

                  let text = dic[seachName];

                  newDic[seachName] = getInf(text,keyWord);

              }

      return data

  }

3使用  resdatarescueList = thisseachRedText(resdatarescueList,thisdatakeyWord,'name')

4案例

5效果

最近一直在做小程序,工作中也遇到了一些问题,踩了一些坑,所以想着写篇文章记录下来,并借此将小程序开发的相关知识进行梳理,方便以后参考,也为刚刚接触小程序的人提供一些思路方法,互相学习,共同进步。

1、微信小程序的目录结构及配置说明

appjson是小程序的全局配置文件,所有配置项key必须使用 双引号括起来 ,value值为字符串类型的也必须使用双引号, 不支持单引号 。

11 pages

pages选项是必须配置的。该配置项注册了小程序所有页面的地址,其中每一项都是页面的 路径+文件名 。每一个页面都是由json、js、wxml、wxss四个文件组成,并且 四个文件的名字必须要一致 。

12   tabBar

tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab

13 usingComponents

使用自定义组件或者插件提供的组件前,必须先在这里声明

2、开发微信小程序遇到的问题及解决办法

21 双向绑定

微信小程序不支持通过v-model的方式实现自动双向绑定,需要给表单元素通过绑定事件,并使用thissetData来赋值实现。

22 computed和watch

微信小程序默认是不支持computed和watch的,如需要使用这两项功能,需要安装miniprogram-computed ,安装方法见 官方文档

23 对象赋值

如果给对象的属性赋值,可以使用thissetData({'objkey':value})来赋值,但是如果给某个属性名是变量的属性赋值,通过这种方法是会报错的,经过多次尝试,发现使用如下的方式赋值成功。

let newObj = `obj${key}`

thissetData({

[newObj]: value

})

24 scroll-view

当页面存在d框容器,并且d框里的内容是需要滚动条滚动展示时,如果d框下面那层的容器使用view元素的话,会导致滚动d框内容时,同时会触发d框下面那层的页面容器也会一起滚动,解决此问题可以将d框下面的容器使用scroll-view元素替代view元素

3、小程序测试和发布

由于服务器域名request合法域名每个月 只能修改5次 ,因此在本地开发小程序时,需要在微信调试工具中设置不校验合法域名。等小程序上线前再一次性将所有域名添加到小程序管理后台。

以上便是此次小程序开发中积累的一些经验,希望能给刚刚接触小程序的人提供一些思路方法,在以后的开发中,如果遇到新的问题,继续更新文档

以上就是关于微信小程序同步微信公众号文章(二)全部的内容,包括:微信小程序同步微信公众号文章(二)、微信小程序console.log(time)打印出三行时间,赋值给data,却显示一条数据求大神指点、云平台小程序中怎么设置价格标签等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址:https://54852.com/zz/10109283.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存