文档章节

微信小程序基本目录结构学习

史文帝
 史文帝
发布于 2018/03/14 14:49
字数 1903
阅读 10
收藏 0

今天我们就以firstdemo为例,介绍一下小程序的基本目录结构。
当我们打开一个微信小程序项目后,点击进入“编辑”菜单,我们可以看到有以下5个文件/文件夹):pages文件夹,utils文件夹,全局文件app.js文件,全局文件app.json文件,图片编辑文件工具app.wxss文件。
<ignore_js_op> 
小程序目录结构的整体结构如下:
<ignore_js_op> 
<ignore_js_op> 

我们详细介绍下小程序目录中每个文件和文件夹的功能,以及注意事项。
1.pages目录介绍

pages:主要存放小程序的页面文件,其中每个文件夹为一个页面,每个页面包含四个文件:

index.js

.js是小程序的逻辑文件,也称事件交互文件和脚本文件,用于处理界面的点击事件等功能,像设置初始数据,定义事件,数据的交互,逻辑的运算,变量的声明,数组,对象,函数,注释的方式等,其语法与javascript相同。我们可以打开仔细查看index.js里面的代码。

首先,我们可以在data里面,motto是显示hello word,改变成hello微信小程序。如下图所示:

 

其次,我们看一下bindViewTap: function()的功能,是点击跳转到日志页面。我们可以点击头像看一下演示效果,如下图所示:
<ignore_js_op> 

最后,我们看一下onLoad函数,是设置页面启动时的动作。我们可以修改页面启动时显示页面,也可以新增函数,如下图所示:
<ignore_js_op> 
常用的用.js函数如下所示:

  1. Page({
  2.   data:{
  3.     // text:"这是一个页面"
  4.   },
  5.   onLoad:function(options){
  6.     // 页面初始化 options为页面跳转所带来的参数
  7.     console.log('App onLoad')
  8.   },
  9.   onReady:function(){
  10.     // 页面渲染完成
  11.     console.log('App onReady')
  12.   },
  13.   onShow:function(){
  14.     // 页面显示
  15.     console.log('App onShow')
  16.   },
  17.   onHide:function(){
  18.     // 页面隐藏
  19.     console.log('App onHide')
  20.   },
  21.   onUnload:function(){
  22.     // 页面关闭
  23.     console.log('App onUnload')
  24.   } 
  25. })

复制代码

index.json.json后缀的文件是配置文件,主要是json数据格式存放,用于设置程序的配置效果。我们可以在index目录下创建.json为配置文件,如下所示:
<ignore_js_op> 
index.json该配置文件只能配置本级目录下的页面配置文件,并且只能对导航栏的相关文件进行配置修改,如用于修改导航栏显示样式,如导航的文字,背景颜色,文字颜色等。其语法跟json语法相同。我们举例修改一下导航栏的背景颜色为红色,如下图所示:

<ignore_js_op>

我们可以看到背景颜色变成的红色。。(这颜色真是惨不忍睹啊!)

index.wxml

.wxml文件是界面文件,是页面结构文件,用于构建页面,在页面上增加控件。全称是weixin markup lanuage的缩写,微信标记语言。跟其他一般标记语言一样,标签成对, 标签名小写。可以通过引用class来控制外观,也可以通过绑定事件来进行逻辑的处理,通过渲染来完成我们需要的列表等。是连接用户操作和后端逻辑的纽带桥梁。我们在页面的看到的元素,都可以在这里编辑。例如,我们在页面上放一个按钮,如下图所示:

<ignore_js_op>

在.wxml中如何对不需要的程序代码进行注释呢?如下:

  1. <!--index.wxml-->
  2. <view class="container">
  3.   <view  bindtap="bindViewTap" class="userinfo">
  4.     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  5.     <text class="userinfo-nickname">{{userInfo.nickName}}000</text>
  6.   </view>
  7.   <view class="usermotto">
  8.     <text class="user-motto">{{motto}}</text>
  9.   </view>
  10.   <!--<button type="primary">按钮</button>-->
  11. </view>
  12.  

复制代码

注意:

1. 在微信小程序里面这些特定的标记叫做组件。

 

index.wxss

.wxss是样式表文件,类似于前端中的css,是为.wxml文件和page文件进行美化的文件,让界面显示的更加美观。例如对文字的大小,颜色,图片的宽高,设置个.wxml中个组件的位置,间距等。

注意:

1.小程序每个页面必须有.wxml和.js文件,其他两种类型的文件可以不需要

2.文件名称必须与页面的文件夹名称相同,如index文件夹,文件只能是index.wxml、index.wxss、index.js和index.json.

 

1.2 utils

该文件件主要用于存放全局的一些.js文件,公共用到的一些事件处理代码文件可以放到该文件夹下,用于全局调用。例如,公用的方法:对时间的处理等。

  1. module.exports = {  
  2.   formatTime: formatTime  
  3. }  

复制代码对于允许外部调用的方法,用module.exports进行声明,才能在其他js文件中用一下代码引入

  1. var util = require('../../utils/util.js')

复制代码然后就可以调用该方法。

举例:我们直接定义一个utils函数,如下图所示:

  1. function util(){
  2.   console.log("模块被调用了!!")
  3. }
  4.  
  5. module.exports.util = util

复制代码

然后在index.js文件中调用这个util函数,如下所示:

  1. var common = require('../../utils/util.js')

复制代码

我们可以保存后,在后台可以看到,我们定义的util内容被调用了,如下所示:

<ignore_js_op>

1.3 app.js、app.json、app.wxss

app.js : 系统的方法处理全局文件,也就是说文件中规定的函数和数据,在整个小程序中,每一个框架页面和文件都可以使用this获取。每个小程序都会有一个app.js文件,有且只有一个,位于项目的根目录!app.js的作用就是告诉小程序,注册一个小程序实例使用app(object)的形式注册,实现小程序在不同阶段的需要实现的事件功能,如onLoad,onshow等,全局的on事件只有如下三个,要比页面的on事件要少。主要处理程序的声明周期的一些方法;例如:程序刚开始运行时事件处理等.app.js 里面包含一个app() 方法,里面提供对应事件定义,如下

  1.  
  2. App({
  3.   onLaunch: function () {
  4.     console.log('App Launch')
  5.   },
  6.   onShow: function () {
  7.     console.log('App Show')
  8.   },
  9.   onHide: function () {
  10.     console.log('App Hide')
  11.   }
  12. })

复制代码App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。

<ignore_js_op> 
app.json : 系统全局配置文件,是必须包含的。包含设置页面路径,设置底部,网络,调试模式,设置导航头的颜色,字体大小,下面有没有tabbar等功能,具体页面的配置在页面的json文件中单独修改,任何一个页面都需要在app.json中注册,如果不在json中添加,页面是无法打开的。

  1.   "pages":[
  2.     "pages/index/index",
  3.     "pages/logs/logs"
  4.   ],

复制代码

(框架中的json优先级高于全局的json优先级。)


app.wxss : 全局的界面美化代码,并不是必须的。其优先级同样没有框架中的wxss的优先级高。

举例:在index.wxss中有头像的外边距设置

  1. .usermotto {
  2.   margin-top: 200px;
  3. }

复制代码在app.wxss中也定义一个全局的头像外边距设置400px,我们看看到底哪一个被执行了。

  1. .usermotto {
  2.   margin-top: 400px;
  3. }

复制代码在执行重启的过程中,我们可以看到全局的参数被index.wxss里面的覆盖了。

<ignore_js_op>


微信小程序的图片添加和处理
微信小程序中添加图片是非常麻烦的,只能通过打开项目文件夹,把图片放到目录下即可。在代码中引用图片的相对路径或者绝对路径就可以了。目前小程序开发中仅支持png和jpg格式,其他格式的图片无法打开。

本文转载自:https://www.cnblogs.com/thebeauty/p/6421355.html

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
微信小程序入门一篇就够了 豆瓣电影Top250

一直从事安卓开发,前不久公司突然让我研究一下微信小程序。微信小程序的需求现在越来越多了,各种大小公司现在一开口就是来给我做个小程序,微信小程序以其“即用即走”的超便利特性受到越来...

天才文西
2018/08/27
0
0
微信小程序开发--『狗蛋TV』

狗蛋TV 狗蛋TV是基于微信小程序开发的一款App。gordanLee每天都会推荐一首歌、一篇文章、一段短视频,每天用十分钟的细碎时光,点燃内心的光明。目前分为音乐,短视频,影评三个模块。 线上开...

李帅醒
2018/05/15
0
0
论如何将 h5 页面快速转换成微信小程序

前言 微信小程序自开放出来到现在也有一段时间了,相信其底层架构也被琢磨得差不多了。微信小程序本身是双线程运行的结构,而 h5 页面是单线程的运行模式,因此两者无法直接互通。微信小程序...

june01
2018/11/15
0
0
微信小程序开发框架_类MINA文件结构

微信小程序开发框架_类MINA文件结构 微信小程序MINA文件结构 微信小程序包含一个描述整体程序的app和多个描述各自页面的page。 一个微信小程序主体部分由三个文件组成,必须放在项目的根目录...

百度小程序
2018/11/12
0
0
Taro实践 - 快速开发【知乎】多端应用

来自团队小伙伴 - 阿集,关于 Taro 上手实践的一篇文章,希望对大家的使用有所帮助。 1. Taro 简介 是由凹凸实验室打造的一套遵循 语法规范的多端统一开发框架。 使用 ,我们可以只书写一套代...

凹凸实验室
2018/06/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Vert.x系列(二)--EventBusImpl源码分析

前言:Vert.x 实现了2种完成不同的eventBus: EventBusImpl(A local event bus implementation)和 它的子类 ClusteredEventBus(An event bus implementation that clusters with other Ve......

冷基
30分钟前
0
0
Perl - 获取文件项目

参考:http://www.runoob.com/perl/perl-directories.html 下面返回JSON格式的文件列表 #!/usr/bin/perluse strict;use warnings;use utf8;use feature ':5.26';require Fi......

wffger
昨天
1
0
vue组件系列3、查询下载

直接源码,虽然样式样式不好看,逻辑也不是最优,但是可以留作纪念。毕竟以后类似的功能只需要优化就可以了,不用每次都重头开始。。。 <template> <div class="pre_upload"> <div ...

轻轻的往前走
昨天
1
0
java浅复制和深复制

之前写了数组的复制,所以这里继续总结一下浅复制和深复制。 浅拷贝:对基本数据类型进行值传递,对引用数据类型进行引用传递般的拷贝。 深拷贝:对基本数据类型进行值传递,对引用数据类型,...

woshixin
昨天
1
0
kubernetes 二进制包安装

环境 角色 主机名 内网 IP 集群 IP 操作系统 服务 执行目录 部署机 k8s-master master120 10.0.4.120 - CentOS kube-apiserver kube-scheduler kube-controller-manager /opt/kubernetes/ et......

Colben
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部