仿今日头条小程序搭建

首先我们要明确小程序需要哪几种文件。

微信小程序中就四种类型的文件：

js ---------- JavaScrip文件
json -------- 项目配置文件，负责窗口颜色等等
wxml ------ 类似HTML文件
wxss ------- 类似CSS文件

在根目录下用app来命名的这四种类型的文件，就是程序入口文件。具体介绍如下：

app.json

必须要有这个文件，如果没有这个文件，IDE会报错，因为微信框架把这个作为配置文件入口，
你只需创建这个文件，里面写个大括号就行。以后我们会在这里对整个小程序的全局配置。记录了页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。

app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行什么都不需要写
以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.wxss

这个文件不是必须的。因为它只是个全局CSS样式文件

app.wxml

这个也不是必须的，而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的
有了这两个文件你运行程序，IDE就不会报错了。

接下来我会向大家介绍一下商城小程序小程序

首先先向大家展示一下效果。

1.app.js

//app.jsApp({  onLaunch: function () {    //调用API从本地缓存中获取数据    var logs = wx.getStorageSync('logs') || []    logs.unshift(Date.now())    wx.setStorageSync('logs', logs)  },  getUserInfo:function(cb){    var that = this    if(this.globalData.userInfo){      typeof cb == "function" && cb(this.globalData.userInfo)    }else{      //调用登录接口      wx.login({        success: function () {          wx.getUserInfo({            success: function (res) {              that.globalData.userInfo = res.userInfo              typeof cb == "function" && cb(that.globalData.userInfo)            }          })        }      })    }  },  globalData:{    userInfo:null  },  title:[],  imgUrls:[],  author:[],  date:[],  url:[],  requestUrl:"top",  cssActive:0,  page:0,}）

2.app.json

{  "pages":[    "pages/index/index",    "pages/main/main"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#d43d3d",    "navigationBarTitleText": "头条新闻",    "navigationBarTextStyle":"#fff"  }}

3.app.wxss

/**app.wxss**/.container {  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  padding: 200rpx 0;  box-sizing: border-box;} view,scroll-view{  font-size: 24rpx;  font-family: "微软雅黑";}

本站所有资源来源于网络，由友友集结地整理发布仅供大家学习与参考，如有侵权，立刻删除。

仿今日头条小程序搭建相关推荐

帝国cms仿今日头条小程序的基本模型的开发限于新闻模型
本节将描述使用帝国cms仿今日头条简版的微信小程序的配置和开发,在此之前,请大家先阅读一下以下内容: phpstudy配置之本地虚拟主机的配置和本地域名的配置本地安装帝国cms 要在帝国cms中建立 ...
WordPress微信小程序,WordPress百度小程序,WordPressQQ小程序,WordPress今日头条小程序,WordPress抖音小程序,WordPress多端小程序
WordPress微信小程序,WordPress百度小程序,WordPressQQ小程序,WordPress今日头条小程序,WordPress抖音小程序,WordPress多端小程序. WordPre ...
关于今日头条小程序（字节跳动小程序）相关问题
上周突然遇到让开发今日头条小程序(字节跳动小程序)的需求,然后看了下文档发现真的简陋.而且文档有错别字.槽点有点多.但是和老版本的小程序相差不多,然后我就抱着试一试的心态,真的是试一试把微信小程序换了 ...
今日头条小程序内测！BAT早已收割，张一鸣还能分到羹吗？
文:罗超,陶程亦有贡献日前,一位开发者向"罗超频道"透露,其已受邀参加今日头条小程序内测,如果不出意外,今日头条小程序平台很快就会发布. 如果今日头条发布小程序,将是继BAT后, ...
微信封杀今日头条小程序；英特尔敲定新 CEO；快手成央视春晚官方合作伙伴 | 雷锋早报...
英特尔正式任命罗伯特·斯万为新任 CEO 1月31日据外媒消息,英特尔最终确认任命临时 CEO 罗伯特·斯万正式接任CEO一职. 此前受到英特尔前 CEO 科再奇丑闻影响,英特尔CEO临时由罗伯特·斯 ...
今日头条小程序平台今日发布，头条小程序开放了哪些能力？
继微信.支付宝.百度发布各自的小程序平台后,在今日头条生机大会上,今日头条启动生态升级,打造基础设施最完备的内容平台,并且发布了头条小程序平台. 小程序官方示例使用在今日头条客户端中搜索" ...
大力出奇迹：今日头条小程序跻身代理创业新沃土
提到小程序,大家都还是最熟悉微信小程序了,确实,微信小程序出现早,影响大,使用普遍,这些都是得益于微信这个超级APP,如果没有微信的沉淀,小程序恐怕也不会这么有名.小程序的由来就是微信的作用,现在来看 ...
android高仿今日头条小视频转场切换效果
可以先看看今日头条效果功能分析点击列表上的一个item,该item会放大,最后直接全屏播放小视频,刚开始看上去,以为是个共享元素的转场动画, 后来想到,共享元素要在android 5.0以上支持, ...
PHP工程改成微擎的步骤_php微擎二次开发实战教程之今日头条小程序
第一课(微擎介绍安装).mp4 95.1M 第五课(微擎模块工作流程解析).mp4 126.3M 第四十一课(小程序发布到官方应用市场).mp4 26.6M 第四十课(文章收藏).mp4 74.1M ...
[A002]微擎新版本今日头条小程序
关注公众号领取