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


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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
JS实现4位随机验证码
Oct 19 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开发中的tips(必看篇)
2017/03/24 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
Javascript实现关闭广告效果
2021/01/29 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python的in,is和id函数代码实例
2020/04/18 Python
如何教少儿学习Python编程
2020/07/10 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
安全生产承诺书
2014/03/26 职场文书
加油口号大全
2014/06/13 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
会计实训报告范文
2014/11/04 职场文书
投标承诺函范文
2015/01/21 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书