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


Posted in Javascript onNovember 21, 2016

上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站。

先别着急我们一步步来,先尝试下写一个自己的小demo.

这一篇文章我们主要的是介绍一下小程序的一些目录结构,以及一些语法,为我们后面的微信小程序商城系统做铺垫。

首先我们来了解下小程序的目录结构
微信小程序购物商城系统开发系列-目录结构介绍
Pages 我们新建的一些页面将保存在这个文件夹下面,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

Utils 我们写的一些公共的工具js可以放里面。

app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。微信小程序购物商城系统开发系列-目录结构介绍
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。

{

 "pages":[

  "pages/index/index",

  "pages/logs/logs"

 ],

 "window":{

  "backgroundTextStyle":"light",

  "navigationBarBackgroundColor": "#fff",

  "navigationBarTitleText": "WeChat",

  "navigationBarTextStyle":"black"

 }

}

注:app.json中是对整个小程序的全局设置,当然每个页面也有自己的json文件。每个页面下的json文件只能对window 进行设置,所以页面json文件下只需写入window的配置即可

{

  "backgroundTextStyle":"light",

  "navigationBarBackgroundColor": "#fff",

  "navigationBarTitleText": "WeChat",

  "navigationBarTextStyle":"black"

 }

app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

每个页面中也可以定义自己的wxss。Wxss也就是微信所提供的css样式表,里面的写法几乎和css差不多。不过他支持的选择器相对比较少。在写的时候我们以前的一些项目的css 基本可以拿过来用,不过除了下面这些选择器外,你使用了其他的选择器,可能使整个页面报错!
微信小程序购物商城系统开发系列-目录结构介绍
Index.whtml  wxml后缀的文件夹也就是微信小程序提供给我们的页面结构文档,就相当于我们以前的web页面的html 差不多,只不过他自定义了一些自己的标签。

接下来我们就新建一个页面来尝试下
微信小程序购物商城系统开发系列-目录结构介绍
在pages 下新建页面test 注意新建的.js,.json,.xml,.wxss。和page 下定义的 test文件夹名称保持一致,微信微信小程序会自动读取这些文件,并生成小程序实例。微信小程序购物商城系统开发系列-目录结构介绍
首先我们要在app.json下配置好我们刚新建的页面

注意:页面配置先后的顺序,在实际操作中发现,第一个配置的为首页。

配置好后我们就可以编写我们的页面代码。微信小程序购物商城系统开发系列-目录结构介绍
大家可以看到,我们在app.json 页面可以直接配置当前页面的一些window属性微信小程序购物商城系统开发系列-目录结构介绍
Wxml 中我们可以编写一些我们页面展示的结构,也就是我们以前写html一样。这中间我们使用到了 <view> 标签,他就相当于我们以前用的div 差不多。微信小程序购物商城系统开发系列-目录结构介绍
Wxss 大家看到是不是和我们以前写的css 差不多。这边是个我们之前定义的 .box 加一个样式。

test.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。
微信小程序购物商城系统开发系列-目录结构介绍微信小程序购物商城系统开发系列-目录结构介绍
这边我们使用bintap给view绑一个点击事件然后再弹出一个提示框。

注意:这边js的写法和我们以前的写法完全一样,只不过这里面不能使用window对象和document对象,同样的也不能使用jquery ,zepto等框架,因为这些框架中会使用到window和document 对象。

好啦!今天只是给大家简单介绍下小程序的目录结构和简单的使用了下,下一节我们会来开始我们商城系统的编写。

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

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 #Javascript
全面解析node 表单的图片上传
Nov 21 #Javascript
利用fecha进行JS日期处理
Nov 21 #Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 #Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 #Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 #Javascript
js学习之----深入理解闭包
Nov 21 #Javascript
You might like
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP插入排序实现代码
2013/04/04 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
Python类的基础入门知识
2008/11/24 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
经理聘任证明
2015/03/02 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python