admin管理员组文章数量:1660864
首先我们要明确小程序需要哪几种文件。
微信小程序中就四种类型的文件:
-
js ---------- JavaScrip文件
-
json -------- 项目配置文件,负责窗口颜色等等
-
wxml ------ 类似HTML文件
-
wxss ------- 类似CSS文件
在根目录下用app来命名的这四种类型的文件,就是程序入口文件。具体介绍如下:
app.json
必须要有这个文件,如果没有这个文件,IDE会报错,因为微信框架把这个作为配置文件入口,
你只需创建这个文件,里面写个大括号就行。以后我们会在这里对整个小程序的全局配置。记录了页面组成,配置小程序的窗口 背景色,配置导航条样式,配置默认标题。
app.js
必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写
以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
app.wxss
这个文件不是必须的。因为它只是个全局CSS样式文件
app.wxml
这个也不是必须的,而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的
有了这两个文件你运行程序,IDE就不会报错了。
接下来我会向大家介绍一下商城小程序小程序
首先先向大家展示一下效果。
1.app.js
//app.js
App({
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: "微软雅黑";
}
本站所有资源来源于网络,由友友集结地整理发布仅供大家学习与参考,如有侵权,立刻删除。
版权声明:本文标题:仿今日头条小程序搭建 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729881853a1216020.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论