简单了解微信小程序的目录结构

前言

在开发小程序之前,我们首先需要对其目录结构进行了解,以便于提升开发效率。

我们使用微信开发者工具构建一个小程序项目,我们可以看到目录下生成了件。

  • ① 以.json为后缀的JSON配置文件;
  • ② 以.wxml为后缀的WXML模板文件,其可以看做是一个简洁的HTML页面,略有不同的则是文件后缀以及其中的部分标签不同;
  • ③ 以.wxss为后缀的WXSS样式文件,也可以看做一个CSS样式文件;
  • ④ 以.js为后缀的JS脚本文件。

在上图的示例中,我们可以看到根目录下有JS、JSON、WXSS类型文件,这是作为全局配置;而pages/index目录下的四类文件是对具体的页面进行详细设置。

由此可以看出这四类文件在小程序中负责不同的功能,它们在不同的目录下扮演不同的角色。接下来,我们将详细说明四类文件的作用。

1JSON配置

在小程序中,JSON是一种数据格式,其并不是编程语言,它用于配置静态的属性。我们可以看到在根目录下有app.json、project.config.json、以及sitemap.json,在pages/index下有index.json。前三种是对整个小程序的全局配置,而后一种是对具体页面的配置。接下来,我们对其做详细说明。

①、app.json配置文件

其作为当前小程序的全局配置,包括配置页面路径列表、全局默认窗口表现、网络超时时间、底部tab栏、小程序接口权限相关设置等。

注:在json文件中是不能加注释的,此处只为了解释,因此在使用过程中切勿加注释,其他相关属性查看官方文档。

{
/**
* 页面路径列表
* 用于指定小程序由那些页面组成,每一项都对应一个页面的路径。
* 数组列表中的第一项代表小程序的首页。
*/
"pages": [
"pages/index/index"
],
/**
* 全局默认窗口表现
* 用于设置小程序的状态栏、导航条、标题、窗口背景颜色
*/
"window": {
"navigationBarBackgroundColor": "#fff",//导航栏背景颜色
"navigationBarTitleText": "MiniProgrameDemo",//导航栏标题文字内容
"navigationBarTextStyle": "black"//导航栏标题颜色,仅支持black/white
},
//底部tab栏
"tabBar": {
"list": [//tab的列表,最少2个,最多5个
{
"pagePath": "pages/index/index",//页面路径
"text": "首页"//tab上按钮文字
},
{
"pagePath": "pages/index/index",
"text": "第二个首页"
}
]
},
//配置小程序及其页面是否允许被微信索引,若没有该配置,则默认所有页面都允许被索引
"sitemapLocation": "sitemap.json"
}

②、project.config.json工具配置

通常我们在使用各类开发工具时,都会根据自己的喜好做一些简单的配置,如界面配置成护眼模式等。但我们更换电脑后,需要重新配置或导入以前的配置文件,而小程序开发者工具使用project.config.json来统一管理,我们在不同的电脑上导入同一个项目的代码包后,不需要再进行配置。

一般我们会对项目设置(setting)中的是否启用es6转es5(es6)、上传代码时样式是否自动补全(postcss)、是否检查安全域名和TLS版本(URLCheck)等来进行配置。
注:我们可以通过开发者工具右上角的【详情】按钮来快速配置。

③、sitemap配置

小程序提供了配置小程序及其页面是否允许被微信索引的功能,我们可以通过配置一些索引规则来约束页面是否能被索引,使其不能被微信索引。若没有配置该项,则默认所有页面都允许被索引。

注:其他相关配置信息请参照官方文档设置。

{
"rules": [{//索引规则列表
"action": "allow",//页面是否能被索引,取值仅限allow、disallow
"page": "*"//*表示所有页面,不能作为通配符使用
}]
}

④、index.json页面配置

如果我们想设置具体的某个页面的属性,则可以在相应页面的JSON文件中自定义配置。

{
"navigationBarBackgroundColor": "#FF5500",//导航栏背景颜色
"navigationBarTextStyle": "white",//导航栏标题颜色,仅支持black/white
"navigationBarTitleText": "首页",//导航栏标题文字内容
"backgroundTextStyle": "dark", //下拉loading样式,仅支持dark/white
"enablePullDownRefresh": true,//是否启用下拉刷新
"onReachBottomDistance": 50,//页面上拉触底事件触发时距离页面底部距离
"usingComponents": {}//页面自定义组件配置
}

2WXML模板

我们在开发web页面时,使用HTML+CSS+JS这样的组合来构建展示给用户的页面,其中HTML是用来描述当前页面的结构,CSS是用来描述页面的样式,JS通常处理页面与用户之间的交互。

而小程序开发中,其自己的一套书写规范,但与web页面也有相似之处,如WXML在其中就充当了HTML的角色。和HTML非常相似,WXML也是由标签、属性等构成,但也存在着众多不一样的地方:

标签名不一样,在HTML中我们经常会使用div、p、span等来组合出不同的效果。而在小程序中,我们会使用view、button、text等标签,同时小程序页提供了地图、视频、音频等组件供开发者使用。

多了一些wx:if这样的属性以及表达式,在web页面开发中,我们通过使用JS来控制DOM,以及响应用户操作。而小程序通过{{}}的语法将数据绑定到界面,同时也可以通过wx:开头的属性来控制数据的显示。

<!--index.wxml-->
<view class="container">
<text>{{msg}}</text>
<view wx:if="{{flag}}">当前显示状态为true</view>
</view>

3 WXSS样式

WXSS具有CSS大部分特性,同时也做了一些扩充和修改:

新增了尺寸单位。为了考虑手机设备屏幕宽度和设备像素比的不同,需要换算,小程序提供了新的尺寸单位rpx,其不需要开发者自己换算,而是由小程序底层来完成。
提供全局样式和局部样式。在app.wxss中可以设置全局样式,而在具体的页面.wxss中可以设置当前页面的样式。
此外WXSS仅支持部分CSS选择器。

/**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.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}

4 JS交互

在web开发中,我们使用JS来控制与用户的交互行为,而小程序中也是使用JS来处理用户的操作。如先前,我们在页面上显示“Hello World!”。我们只需要在页面的JS文件中,对其进行设置值即可。

Page({
data: {
msg: 'Hello World',
flag: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function () {
},
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序如何调用图片接口API并居中显示

    写完调用天气接口的demo之后,小程序调用天气接口并且渲染在页面,顺便再调用了一下美图的接口API: 美图API url wxml: <view class='imagesize' wx:for="{{list}}" wx:key="index"> <image src="{{list.img}}" class='in-image' > </image> </view> js: Page({ dat

  • 微信小程序如何自定义table组件

    背景 最近想要捣鼓一个自己的小程序,其中数据展示部分比较多,想用table来做展示,但是微信小程序并没有table组件,于是就自己动手捣鼓了一个,勉强能用. 可以看看效果: etable使用介绍 etable的使用很简单,分为 引入.使用.配置等3个阶段 1.引入 首先在要使用的页面中的json文件中配置如下: { "usingComponents": { "etable" : "/compenents/etable/etable" } } 2.

  • 微信小程序学习笔记之目录结构、基本配置图文详解

    本文实例讲述了微信小程序学习笔记之目录结构.基本配置.分享给大家供大家参考,具体如下: 结束了一段时间的学习,开始一段新的学习旅程 -- 微信小程序.现在出去找工作只会PHP.HTML+CSS.JS什么的不够了,总得会点时下热门的东西,例如微信小程序,有很多企业的招聘要求上写着:"做过微信小程序的优先"."只要做过微信小程序的"...... 可见微信小程序的热门程度.话(fei)不(hua)多(ting)说(duo),开始学习. 首先在微信公众平台注册小程序账号:

  • 微信小程序购物商城系统开发系列-目录结构介绍

    上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的小demo. 这一篇文章我们主要的是介绍一下小程序的一些目录结构,以及一些语法,为我们后面的微信小程序商城系统做铺垫. 首先我们来了解下小程序的目录结构 Pages 我们新建的一些页面将保存在这个文件夹下面,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js.index.

  • 微信小程序如何调用json数据接口并解析

    开始写js,用request请求接口url,当请求成功的时候,在控制台打印一下返回的res.data数据,在控制台可以看到打印了接口数据了,在请求接口成功之后,用setData接收数据,并且需在data中声明一个接收数据的变量. Page({ data: { list: [] }, onLoad: function (options) { wx.request({ url: 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?g_tk=538

  • 微信小程序身份证验证方法实现详解

    身份证验证在很多小程序中已经成为必不可少的一部分,它能有效的判断出身份证是否存在,是否输入错误,以防不良人士恶意攻击. 判断一个身份证是否合法的身份证号码有以下几个步骤需要验证 ①:身份证18位数 ②:前17位全是数字 ③:验证最后一位 1.前面的身份证号码17位数分别乘以不同的系数    从第一位到第十七位的系数分别为:7-9-10-5-8-4-2-1-6-3-7-9-10-5-8-4-2. 2.将这17位数字和系数相乘的结果相加. 3.用加出来和模以11,看余数是多少? 4.余数只可能有0-

  • 微信小程序 MINA文件结构

    文件结构 框架程序包含一个描述整体程序的 app 和多个描述各自页面的 page. 一个框架程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件 必填 作用 app.js 是 小程序逻辑 app.json 是 小程序公共设置 app.wxss 否 小程序公共样式表 一个框架页面由四个文件组成,分别是: 文件类型 必填 作用 js 是 页面逻辑 wxml 是 页面结构 wxss 否 页面样式表 json 否 页面配置 注意:为了方便开发者减少配置项,我们规定描述页面的这四个文件必须具有相

  • 微信小程序利用Canvas绘制图片和竖排文字详解

    前言 闲暇时间抽个空写了个三国杀武将手册的小程序,中间有个需求设计的是合成武将皮肤图.竖排的武将姓名.以及小程序码,然后提供保存图片到相册,最终让用户可以分享到朋友圈或其他平台.合成图片应该按照 Canvas 的文档来做都没什么问题,主要是有个竖排文字的需求,这里和大家分享一下. 正文 首先放一张最终保存到相册的图片吧~ 自我感觉良好,至少达到了我自己的预期吧~~~ 下面让我们一步一步来看看如何实现的吧. 整个图片分为三个部分: 武将图片 小程序码 武将文字信息 先来看一下 wxml 里面的代码

  • 简单了解微信小程序的目录结构

    前言 在开发小程序之前,我们首先需要对其目录结构进行了解,以便于提升开发效率. 我们使用微信开发者工具构建一个小程序项目,我们可以看到目录下生成了件. ① 以.json为后缀的JSON配置文件: ② 以.wxml为后缀的WXML模板文件,其可以看做是一个简洁的HTML页面,略有不同的则是文件后缀以及其中的部分标签不同: ③ 以.wxss为后缀的WXSS样式文件,也可以看做一个CSS样式文件: ④ 以.js为后缀的JS脚本文件. 在上图的示例中,我们可以看到根目录下有JS.JSON.WXSS类型文

  • HBuilderX开发一个简单的微信小程序的实现步骤

    目录 一.配置 二.运行 一.配置 在微信开发者工具的设置中开启,如图: 在HBuilderX中新建项目,选择uni-app,如图: 在HBuilderX中编写代码 目录结构如图: 编写代码: index.less .content{ padding: 0 40rpx; image{ width: 100%; } .title{ display: block; text-align: center; font-size: 50rpx; font-weight: bold; } .operate{

  • 超简单的微信小程序轮播图

    Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工具里面导入该项目,就可以调试项目,查看效果. 效果图: 微信小程序实现轮播图,本例是在*.wpy页面开发(该页面的temlate内容对应小程序的wxml,style样式对应小程序的wxss,script对应小程序的js文件,config对应小程序的json文件) <style type="le

  • 简单了解微信小程序 e.target与e.currentTarget的不同

    在小程序的点击事件中,我们经常使用这两个属性来传参,看起来效果一样,查了官方文档如下: target:事件源组件对象 currentTarget:当前组件对象 什么意思?我刚开始就有点不懂,那就直接上代码: <view id="outter" bindtap="tap1"> outer view <view id="middle" bindtap="tap2"> middle view <view

  • 微信小程序 简单教程实例详解

    刚接触到微信小程序开发,这里做一个简单的教程: 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作"绑定开发者".即在"用户身份"-"开发者"模块,绑定上需要体验该小程序

  • 微信小程序搭载node.js服务器的简单教程

    目录 1.node.js 2.微信小程序 3.发送请求 4.data数据存放在服务端 总结 此文章用到的是用node.js搭载的服务器! 1.node.js 检测电脑是否安装node.js,可以用[ cmd/Power shell ]命令检测,也可以用[git-bash],这里就用git-bash进行演示,没有git-bash可以安装一下. node -v 如果有对应的版本号即为已经安装完成! 未安装的附上链接了: node.js安装 : Download | Node.js  或点击这里下载

  • 微信小程序应用号开发教程详解

    微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧 微信公众平台小程序目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧.(公司的项目保密还不能分享代码和截图.博卡君是边加班边偷偷给大家写教程.感谢「名片盒」团队提供他们的服务号来动这个手术,所以博卡君的教

  • 微信小程序开发入门基础教程

    微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

  • 微信小程序 require机制详解及实例代码

    微信小程序 require机制详解 一, JS模块加载:一次性加载全部JS, 但并不一定立即执行. 先提一提微信小程序架构: 类浏览器 -> HTTP本地服务 -> 云端服务 微信小程序运行的架构,基本上是浏览器 -> HTTP本地服务 -> 云端服务, HTTP本地服务用来读取本地文件或者代理云端的文件资源.读取项目中JS文件, 是由HTTP本地服务取本地存储的脚本文件. 似乎比较简单,一个HTML 引用所有JS文件 既然采用了这种架构,那微信小程序就类似浏览器那样,借助一个HT

随机推荐