微信小程序 实战程序简易新闻的制作


Posted in Javascript onJanuary 09, 2017

微信小程序 实战项目:

简易新闻制作

先看下效果:

微信小程序 实战程序简易新闻的制作

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


代码结构

微信小程序 实战程序简易新闻的制作

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

代码内容,主要看下配置

app.json 配置项列表

{
 "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
}
属性 类型 必填 描述
pages String Array 设置页面路径
window Object 设置默认页面的窗口表现
tabBar Object 设置底部 tab 的表现
networkTimeout Object 设置网络超时时间
debug Boolean 设置是否开启 debug 模式

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

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

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

Javascript 相关文章推荐
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
jquery实现多次上传同一张图片
Jan 09 #Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 #Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 #Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 #Javascript
jQuery编写设置和获取颜色的插件
Jan 09 #Javascript
图片懒加载插件实例分享(含解析)
Jan 09 #Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 #Javascript
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
python多进程共享变量
2016/04/06 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
会计专业应届生求职信
2013/11/24 职场文书
策划总监岗位职责
2014/02/16 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
2014年关工委工作总结
2014/11/17 职场文书
通讯稿范文
2015/07/22 职场文书
婚宴父母致辞
2015/07/27 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL