微信小程序（二）

上篇文章简单的介绍了微信小程序的开发程序安装，小程序的创建和基本文件的作用等。这篇文章就介绍一下，微信小程序开发所用的框架。
微信小程序开发，其实就是开发主要的四个文件：.js，.json，.wxml，.wxss
这四个后缀的文件是主要的文件，

在我们生成一个新的项目是会有app.js，app.json，app.wxss三个文件，这三个文件就是小程序的全局配置文件，在修改其中的参数时会影响所有页面的展示效果。

而在新建项目中有一个pages的文件夹，其中一般会自带有两个文件夹index和logs，这两个就是我们的页面文件存放地址，每个文件夹中有四个文件：.js，.json，.wxml，.wxss 也是以这四个为后缀的文件，且他们的名称相同，其中.wxml就是我们的展示页面。这里面的.js，.json，.wxss这三个文件就是这个页面的局部配置文件，其中的参数只对本页面有效。

新建的项目中有两个页面，我们也可以*添加我们需要的页面，同样也是放在一个文件夹中，名称必须相同，必须有.js和.wxml两个文件。生成后在全局配置的app.json中注册.
如下图：
微信小程序（二）
app.json 配置示例：
{
“pages”:[ //页面注册
“pages/index/index”,
“pages/logs/logs”
],
“window”:{ //窗口设置，接收object
“backgroundTextStyle”:“light”, //下拉样式
“navigationBarBackgroundColor”: “#fff”, //导航栏背景颜色
“navigationBarTitleText”: “我的小程序”, //导航栏文字
“navigationBarTextStyle”:“black” //导航栏文字样式
},
“tabBar”:{ //底部tab的展示，接收对象
“list”:[ //底部导航条展示效果，最多展示5个导航
{
“pagePath”:“pages/index/index”, //页面路径
“text”:“首页” //展示名称
},
{
“pagePath”:“pages/logs/logs”,
“text”:“日志”
}
],
“color”:"#016199", //tabBar文字颜色
“selectedColor”:"#010101", //选中后的颜色
“backgroundColor”:"#999999", //背景颜色
“borderStyle”:“white” //边框颜色仅支持‘black’和‘white’
},
“networkTimeout”:{ //超时时间
“request”:100000, //请求超时时间
“downloadFile”:10000 //下载超时时间
},
“debug”:true //开启调试
}
}
}
这是一个全局的app.json文件的格式及常用配置。具体配置参考配置小程序

app.js全局配置用来注册小程序，其中调用App()函数进行注册，接收object对象，其指定小程序的生命周期回调等。
app.js 主要配置只有5个：onLaunch，onShow，onHide，onError，onPageNotFound，自己也可以添加其他函数
app.js 配置示例：
//app.js
App({
onLaunch: function () {
console.log(‘小程序启动’)
}，
onShow:function(){
console.log(‘从后台到前台’)
},
onHide:function(){
console.log(‘从前台到后台’)
},
globalData: {
userInfo: null
}
})

app.wxss全局页面渲染配置，是对所有页面的 .wxml 为后缀的文件进行渲染
app.wxss初始示例：
/**app.wxss**/
.container { //.获取的是wxml文件的class属性的名称，如同css语法配置
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}

以上就是小程序的开发主要文件的简介，小程序基本的就是入门了，小程序的难点就是有许许多多的API，但是也不用害怕，每个人都记不住每个组件的功能和使用时该调用那个API，但我们只需要知道它应该用在哪里，怎么用就行，在使用时去查查小程序开发文档即可。

微信小程序（二）

相关推荐