1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序js.json.wxss.wxml后缀文件的区别及使用方法

微信小程序js.json.wxss.wxml后缀文件的区别及使用方法

时间:2019-03-31 20:13:25

相关推荐

微信小程序js.json.wxss.wxml后缀文件的区别及使用方法

.js后缀的是脚本文件

.json后缀的文件是配置文件

.wxss后缀的是样式表文件

.wxml后缀的文件是页面结构文件。

app.js是小程序的脚本代码。

我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档

//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}})

app.json 是对整个小程序的全局配置。

我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"}}

app.wxss 是整个小程序的公共样式表。

我们可以在页面组件的 class 属性上直接使用 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;}

关于页面

我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

index.wxml 是页面的结构文件:

<!--index.wxml--><view class="container"><view bindtap="bindViewTap" class="userinfo"><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view></view>

关于创建项目时自带的三个文件,app.js,app.json,app.wxss

app.js相当于程序的入口,在程序启动的时候会触发小程序声明周期的方法,如果你想要在小程序加载的时候做一些事情,比如说登陆,读取信息,可以在这里执行相关的操作。

app.json相当于程序的配置文件,告诉程序,你需要加载哪些页面,然后tabBar的结构是怎么样的,所以如果开发工具报错提示说找不到xxx文件,你就可以来app.json里面看一下你填写的文件路径和名字有没有写错。

app.wxss其实就是类似.css文件,就是小程序全局的样式表。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。