今天我们就以firstdemo为例,介绍一下小程序的基本目录结构。
当我们打开一个微信小程序项目后,点击进入“编辑”菜单,我们可以看到有以下5个文件/文件夹):pages文件夹,utils文件夹,全局文件app.js文件,全局文件app.json文件,图片编辑文件工具app.wxss文件。
<ignore_js_op>
小程序目录结构的整体结构如下:
<ignore_js_op>
<ignore_js_op>
我们详细介绍下小程序目录中每个文件和文件夹的功能,以及注意事项。
1.pages目录介绍
其次,我们看一下bindViewTap: function()的功能,是点击跳转到日志页面。我们可以点击头像看一下演示效果,如下图所示:
<ignore_js_op>
最后,我们看一下onLoad函数,是设置页面启动时的动作。我们可以修改页面启动时显示页面,也可以新增函数,如下图所示:
<ignore_js_op>
常用的用.js函数如下所示:
- Page({
- data:{
- // text:"这是一个页面"
- },
- onLoad:function(options){
- // 页面初始化 options为页面跳转所带来的参数
- console.log(‘App onLoad‘)
- },
- onReady:function(){
- // 页面渲染完成
- console.log(‘App onReady‘)
- },
- onShow:function(){
- // 页面显示
- console.log(‘App onShow‘)
- },
- onHide:function(){
- // 页面隐藏
- console.log(‘App onHide‘)
- },
- onUnload:function(){
- // 页面关闭
- console.log(‘App onUnload‘)
- }
- })
index.json.json后缀的文件是配置文件,主要是json数据格式存放,用于设置程序的配置效果。我们可以在index目录下创建.json为配置文件,如下所示:
<ignore_js_op>
index.json该配置文件只能配置本级目录下的页面配置文件,并且只能对导航栏的相关文件进行配置修改,如用于修改导航栏显示样式,如导航的文字,背景颜色,文字颜色等。其语法跟json语法相同。我们举例修改一下导航栏的背景颜色为红色,如下图所示:
- <!--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}}000</text>
- </view>
- <view class="usermotto">
- <text class="user-motto">{{motto}}</text>
- </view>
- <!--<button type="primary">按钮</button>-->
- </view>
- module.exports = {
- formatTime: formatTime
- }
- var util = require(‘../../utils/util.js‘)
- function util(){
- console.log("模块被调用了!!")
- }
- module.exports.util = util
- var common = require(‘../../utils/util.js‘)
- App({
- onLaunch: function () {
- console.log(‘App Launch‘)
- },
- onShow: function () {
- console.log(‘App Show‘)
- },
- onHide: function () {
- console.log(‘App Hide‘)
- }
- })
app.json : 系统全局配置文件,是必须包含的。包含设置页面路径,设置底部,网络,调试模式,设置导航头的颜色,字体大小,下面有没有tabbar等功能,具体页面的配置在页面的json文件中单独修改,任何一个页面都需要在app.json中注册,如果不在json中添加,页面是无法打开的。
- "pages":[
- "pages/index/index",
- "pages/logs/logs"
- ],
app.wxss : 全局的界面美化代码,并不是必须的。其优先级同样没有框架中的wxss的优先级高。
- .usermotto {
- margin-top: 200px;
- }
- .usermotto {
- margin-top: 400px;
- }
微信小程序的图片添加和处理
微信小程序中添加图片是非常麻烦的,只能通过打开项目文件夹,把图片放到目录下即可。在代码中引用图片的相对路径或者绝对路径就可以了。目前小程序开发中仅支持png和jpg格式,其他格式的图片无法打开。