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

微信小程序 实战项目：

简易新闻制作

先看下效果：

实现思路数据全部是采用的本地数据，图片也是本地图片，因为苦逼的个人开发者，无法认证；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

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

赞 (0)

相关推荐

  • 微信小程序 picker-view 组件详解及简单实例

    微信小程序 picker-view 组件详解及简单实例

    picker-view 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 嵌入页面的滚动选择器 属性名 类型 默认值 说明 value Number Array   数组中的数字依次表示 picker-view 内的 picker

  • 微信小程序组件 contact-button（客服会话按钮）详解及实例代码

    微信小程序组件 contact-button contact-button 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话. 属性名 类型 默认值 说明 size Number 18 会话按钮大小,有效值 18-27,单位:px type String default-dark 会话按钮的样式类型,有效值 default-dark, default-light session-from String   用户从该按钮进入会话时,开发者将收到带上本参数的事件推送.本

  • 微信小程序 radio单选框组件详解及实例代码

    微信小程序 radio单选框组件详解及实例代码

    微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成 属性名 类型 默认值 说明 bindchange EventHandle   radio-g

  • 微信小程序 开发之快递查询功能的实现

    微信小程序 开发之快递查询功能的实现

    微信小程序 快递查询功能: 产品需求, 准备api, 代码编写.  第一步:产品需求,我们需要实现如下图的一个功能,在文本框输入快递单号,点击查询,下面出来我们需要的快递信息 第二步:准备 我们先找一个快递的api接口,通过http://apistore.baidu.com/我们可以看到很多的api,我们找一个快递查询的 我们可以看到有接口地址,和一些参数.做好这个准备接下来就开始编码工作了---- 第三步:编码工作 我们新建一个Express的文件,然后默认文件准备齐全 我们现在app.js中

  • 微信小程序 slider 详解及实例代码

    微信小程序 slider 详解及实例代码

    微信小程序slider 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器 属性名 类型 默认值 说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大

  • 微信小程序 switch组件详解及简单实例

    微信小程序 switch组件详解及简单实例

    微信小程序switch 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 开关选择器 属性名 类型 默认值 说明 checked Boolean false 是否选中 disabled Boolean false 是否禁用 typ

  • 微信小程序 textarea 组件详解及简单实例

    微信小程序textarea 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 多行输入框. 属性名 类型 默认值 说明 value String   输入框的内容 placeholder String   输入框为空时占位符 placehold

  • 微信小程序 摇一摇抽奖简单实例实现代码

    微信小程序 摇一摇抽奖简单实例实现代码

    微信小程序 摇一摇抽奖 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json的文件,可以看到在"pages"的数组里,里面配置了每个界面,且包含了每个界面文件的目录 我们接下来看一下page文件夹,可以看到每个页面需要包含两个文件,一个是js文件,是每个界面的入口,wxml的文件是每个界面的布局文件,wxss是样式文件. 接下来看一下logs文件夹,在logs文件夹中比index文件夹中多出了一个logs.json的文件,l

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

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

    微信小程序 实战项目: 简易新闻制作 先看下效果: 实现思路数据全部是采用的本地数据,图片也是本地图片,因为苦逼的个人开发者,无法认证:toolbar四个现象:新闻,笑话,历史上的今天和主页,集中主页采用的是默认的页面,添加自己的一些内容:数据绑定,列表渲染,条件渲染和事件的使用:使用一些基础的View和text,部分API的使用: 代码结构 目录 用途 images 存放本地图片 pages 存放页面,history历史上的今天,index主页,joke笑话,news新闻 utils 工具包

  • 微信小程序实战之仿android fragment可滑动底部导航栏（4）

    微信小程序实战之仿android fragment可滑动底部导航栏（4）

    底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一,因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏. 相关教程:微信小程序教程系列之设置标题栏和导航栏(7) 但是通过设置的这个底部的导航栏,功能上比较固定,它必须要设置与它对应的一个页面,而且并不能滑动. 在业务上,有时候会比较限制,并不能完全满足所需. 又例如早前有人拿着UI稿问我,这种广告轮播图的样式,在小程序能不能实现呢? 我当时没有想了下,还不是很确定,因为小程序的轮播图的那几个小点点实在比较普通,样式单一. 因

  • 微信小程序开发实战教程之手势解锁

    微信小程序开发实战教程之手势解锁

    代码:https://github.com/jsongo/wx-gesture-lock 这个手势解锁的demo使用了https://github.com/lvming6816077/H5lock这个项目的算法和主逻辑,整合到微信小程序来,修改了很多地方的语法来适配小程序,去掉了window.document等函数,同时也添加了新的机制来解耦界面的操作和第三方库,这个下面会介绍到. 不过可惜的是,这个demo也只能在开发工具上玩玩,到真机上测试的时候,手指一滑动,页面会跟着滚动,手势没法使用.

  • 微信小程序（应用号）开发新闻客户端实例

    微信小程序（应用号）开发新闻客户端实例

    下载最新版的微信小程序开发工具,目前是v0.9.092300 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html git下载地址:http://git.oschina.net/dotton/news 先看下效果图: Paste_Image.png 一.新建应用 1.内测阶段对于无内测号的开发者,

  • 微信小程序实现简易table表格

    微信小程序实现简易table表格

    本文实例为大家分享了微信小程序实现简易表格的具体代码,供大家参考,具体内容如下 由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档中推荐使用flex布局,就把css中的flex布局学了一遍,效果还行,大家将就看一下 table.wxml <view class="table"> <view class="tr bg-w"> <view class="th">head1</v

  • 微信小程序 简易计算器实现代码实例

    微信小程序 简易计算器实现代码实例

    这篇文章主要介绍了微信小程序 简易计算器实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 只能进行简单的运算 效果图如下: cal.wxml <view class="screen">{{result}}</view> <view class="content"> <view class="buttonGroup"> <button

  • 微信小程序常用简易小函数总结

    本文实例讲述了微信小程序常用简易小函数.分享给大家供大家参考,具体如下: 最近一直在写微信小程序,而且由于是第二次写了,所以针对很多通用的情况封装了一些函数,建议你们放在app.js中,方便全局去调用. 提示类函数 微信有一种原生的API用于显示提示类结果的wx.showToast,而且其中的图片是可以自定义的,所以为了保证全部一致性,而且方便调用,所以我将其全部封装在了app.js中: // 成功 showSuccess: function (message) { wx.showToast({

  • 微信小程序实现简易计算器

    微信小程序实现简易计算器

    微信小程序之简易计算器,供大家参考,具体内容如下 一.介绍 1.中缀表达式 中缀表达式是一种通用的算术或逻辑公式表示方法,操作符以中缀形式处于操作数的中间.中缀表达式是人们常用的算术表示方法. 虽然人的大脑很容易理解与分析中缀表达式,但对计算机来说中缀表达式却是很复杂的,因此计算表达式的值时,通常需要先将中缀表达式转换为前缀或后缀表达式,然后再进行求值.对计算机来说,计算前缀或后缀表达式的值非常简单. 2.后缀表达式 从左至右扫描表达式,遇到数字时,将数字压入堆栈,遇到运算符时,弹出栈顶的两个数

  • 微信小程序实现短信登录的实战

    微信小程序实现短信登录的实战

    目录 1.界面效果预览 2.uView安装 3.uView配置 3.1 main.js中引入 3.2 uni.scss中引入 3.3 App.vue中引入 3.4 pages.json中配置 4.短信登录界面 5.点击获取验证码接口 项目要求增加短信登录及人脸识别登录功能,下面我们来实现下短信登录功能 1.界面效果预览 2.uView安装 uView官网:https://www.uviewui.com 以npm安装为例,执行:npm install uview-ui即可 3.uView配置 3.

  • 微信小程序实现简易封装弹窗

    微信小程序实现简易封装弹窗

    本文实例为大家分享了微信小程序实现简易封装弹窗的具体代码,供大家参考,具体内容如下 1.建立组件文件夹 2.编写组件内容  <!--index.wxml--> <view class="container">   <text>demo 01 heihzi</text>   <view bindtap="onDialog">点击 打开弹窗</view> </view> <dial

随机推荐