锐客网

  1. 首页 > 睿知 > >

微信小程序开发简易教程 微信小程序制作方法( 二 )

睿知


01{02"pages":[03"pages/index/index",04"pages/logs/logs"05],06"window":{07"backgroundTextStyle":"light",08"navigationBarBackgroundColor": "#fff",09"navigationBarTitleText": "WeChat",10"navigationBarTextStyle":"black"11}12}复制代码{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"}}app.wxss 是整个小程序的公共样式表 。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则 。
01/**app.wxss**/02.container {03height: 100%;04display: flex;05flex-direction: column;06align-items: center;07justify-content: space-between;08padding: 200rpx 0;09box-sizing: border-box;10}复制代码/**app.wxss**/.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;}● 创建页面
在这个教程里，我们有两个页面，index 页面和 logs 页面，即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下 。微信小程序中的每一个页面的【路径 页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页 。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json 。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件 。
index.wxml 是页面的结构文件：
0102030405{{userInfo.nickName}}060708{{motto}}0910复制代码{{userInfo.nickName}}{{motto}}本例中使用了、、来搭建页面结构，绑定数据和交互处理函数 。
index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等 。
01//index.js02//获取应用实例03var app = getApp()04Page({05data: {06motto: 'Hello World',07userInfo: {}08},09//事件处理函数10bindViewTap: function() {11wx.navigateTo({12url: '../logs/logs'13})14},15onLoad: function () {16console.log('onLoad')17var that = this18//调用应用实例的方法获取全局数据19app.getUserInfo(function(userInfo){20//更新数据21that.setData({22userInfo:userInfo23})24})25}26})复制代码//index.js//获取应用实例var app = getApp()Page({data: {motto: 'Hello World',userInfo: {}},//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onLoad: function () {console.log('onLoad')var that = this//调用应用实例的方法获取全局数据app.getUserInfo(function(userInfo){//更新数据that.setData({userInfo:userInfo})})}})index.wxss 是页面的样式表：
01/**index.wxss**/02.userinfo {03display: flex;04flex-direction: column;05align-items: center;06}07.userinfo-avatar {08width: 128rpx;09height: 128rpx;10margin: 20rpx;11border-radius: 50%;12}13.userinfo-nickname {14color: #aaa;15}16.usermotto {17margin-top: 200px;18}复制代码/**index.wxss**/.userinfo {display: flex;flex-direction: column;align-items: center;}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;}.userinfo-nickname {color: #aaa;}.usermotto {margin-top: 200px;}页面的样式表是非必要的 。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则 。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则 。

推荐阅读


上一篇：怎么把时间和天气设置到桌面

下一篇：迷你世界桃木图腾有什么用