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


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 相关文章推荐
JavaScript 反科里化 this [译]
Sep 20 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
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获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
python之随机数函数的实现示例
2020/12/30 Python
python中time tzset()函数实例用法
2021/02/18 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
劳资协议书范本
2014/04/23 职场文书
初中生操行评语大全
2014/04/24 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
超市员工辞职信范文
2015/05/12 职场文书
2015教师节通讯稿
2015/07/20 职场文书
班主任远程培训研修日志
2015/11/13 职场文书