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


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 相关文章推荐
jQuery回车实现登录简单实现
Aug 20 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
javascript前端实现多视频上传
Dec 13 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
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
python自动翻译实现方法
2016/05/28 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
化妆师职业生涯规划书
2014/02/16 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
学习十八大标语
2014/10/09 职场文书
单位员工收入证明样本
2014/10/09 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
慰问信范文
2015/02/14 职场文书
2015年预算员工作总结
2015/05/14 职场文书