微信小程序实战之简易新闻制作方法解析

why 164 2024-09-06

这篇文章主要讲述微信小程序实战程序简易新闻的制作方法的相关资料,需要的朋友可以参考下

微信小程序 实战项目:

简易新闻制作

先看下效果:

image.png

实现思路数据全部是采用的本地数据,图片也是本地图片,因为苦逼的个人开发者,无法认证;toolbar四个现象:新闻,笑话,历史上的今天和主页,集中主页采用的是默认的页面,添加自己的一些内容;数据绑定,列表渲染,条件渲染和事件的使用;使用一些基础的View和text,部分API的使用;


代码结构

image.png

目录用途
images存放本地图片
pages存放页面,history历史上的今天,index主页,joke笑话,news新闻
utils工具包
app.js小程序逻辑
app.json小程序公共设置
app.wxss小程序公共样式表

代码内容,主要看下配置

app.json 配置项列表

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

{

 "pages": [

  "pages/news/news",

  "pages/joke/joke",

  "pages/history/history",

  "pages/index/index"

 ],

 "window": {

  "navigationBarBackgroundColor": "#f85959",

  "navigationBarTextStyle": "white",

  "navigationBarTitleText": "微 看",

  "backgroundColor": "#FFFFFF",

  "backgroundTextStyle": "dark",

  "enablePullDownRefresh": true

 },

 "tabBar": {

  "color": "#626567",

  "selectedColor": "#f85959",

  "backgroundColor": "#FBFBFB",

  "borderStyle": "white",

  "position": "bottom",

  "list": [

   {

    "pagePath": "pages/news/news",

    "text": "新闻",

    "iconPath": "images/discovery.png",

    "selectedIconPath": "images/discovery_focus.png"

   },

   {

    "pagePath": "pages/joke/joke",

    "text": "笑话",

    "iconPath": "images/ring.png",

    "selectedIconPath": "images/ring_focus.png"

   },

   {

    "pagePath": "pages/history/history",

    "text": "历史",

    "iconPath": "images/chat.png",

    "selectedIconPath": "images/chat_focus.png"

   },

   {

    "pagePath": "pages/index/index",

    "text": "主页",

    "iconPath": "images/index.png",

    "selectedIconPath": "images/index_focus.png"

   }

  ]

 },

 "networkTimeout": {

  "request": 10000,

  "downloadFile": 10000

 },

 "debug": true

}

属性类型必填描述
pagesString Array设置页面路径
windowObject设置默认页面的窗口表现
tabBarObject设置底部 tab 的表现
networkTimeoutObject设置网络超时时间
debugBoolean设置是否开启 debug 模式

具体配置使用方法请参考官网:

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=201715

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!


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

上一篇:微信小程序 Page 中 data 数据操作与函数调用详解指南
下一篇:微信小程序获取用户手机号的代码示例及解析
相关文章

 发表评论

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