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

2024-10-23 21:19:59

上一篇我们简单介绍了一下微信小程序的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 对象。

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

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

微信小程序商城项目之侧栏分类效果（1）

在商场项目中,一般都会有分类页面. 分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图布局分析: <主盒子> <左盒子></左盒子> <右盒子></右盒子> </主盒子> 左盒子使用标准流右盒子使用绝对定位(top.right) wxml:  <view class="container">  <view class
微信小程序商城项目之商品属性分类（4）

续上一篇的文章:微信小程序之购物数量加减 -- 微信小程序实战商城系列(3) 所提及的购物数量的加减,现在说说商品属性值联动选择. 为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分现在就为大家介绍这个小组件,在小程序中,该如何去写下图为本项目的图: wxml: <view class="title">商品属性值联动选择</view>  <view class="commodity_a
微信小程序商城项目之淘宝分类入口（2）

分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文微信小程序的页面跳转和参数传递 -- 微信小程序教程系列(6) 页面分析: 使用for循环遍历所有项,插入页面,页面中的项使用左浮动,并使用百分比布局,设置20%的宽度每一项. 这样满5个item后,自动排在下一行 wxml: <view class="menu-wrp"> <!
微信小程序商城项目之购物数量加减（3）

我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写下图为本项目的图: wxml:  <view class="stepper">  <text class="{{minusStatus}}" bindtap="bindMinus">-</text&
微信小程序商城开发（ecshop ）简单实例

最近小程序特别火,所以我们公司也针对ecshop平台对接了小程序包括完整的用户系统和购物体统用户系统:收货地址,订单管理,消息管理,优惠券管理等等购物系统支付购物车管理,微信支付等等相信有很多小伙伴都用的是ecshop作为自己的商城,最近小程序又火了,于是就有人问ecshop对接小程序怎么做. 正好最近在开发一个对接ecshop的小程序项目,就将我的一些开发经验分享一下. 一:扫描小程序二维码后的用户信息的获取和缓存获取用户信息需要用到两个api wx.login(OBJECT) 调用
微信小程序购物商城系统开发系列-工具篇的介绍

微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址https://mp.weixi
微信小程序购物商城系统开发系列-目录结构介绍

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

java后台相关问题一,程序包lombok不存在通常报这个错误,是因为,我们的开发者工具idea没有安装lombok库导致的解决办法如下: 提示我们没有安装,我们就安装一个不就行了,下面来教大家如何安装. 1,点击扳手进入设置页 2,点击plugins,然后搜索lombok,点击install即可安装 3,安装完成后,重启idea开发工具即可二,无法执行sql文件,IDEA 2019.1连接数据库报错(08001) 链接mysql数据库报如下错误 08001 could not conn
微信小程序+后端(java)实现开发

前言现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序.所以现在用这篇博客记录我之前开发的一些经验和一些心得吧. 主要内容 springboot后端架构构建小程序项目构建小程序api调用后台resetful接口编写小程序调用后台接口免费的https申请 linux下部署上线微信小程序项目构建这些基础的东西我就不过多介绍,大家在刚开始开发的时候一般都没有自己的服务器及域名
微信小程序实现商城倒计时

本文实例为大家分享了微信小程序实现商城倒计时的具体代码,供大家参考,具体内容如下 index.html: <view class="countDownTimeView pull-left countDownAllView text-left"> <text>倒计时:</text> <text class="voteText countDownTimeText">{{countDownHour}}</text>
Java微信小程序医院挂号系统

目录一.前言介绍二.系统功能分析 2.1用户的功能设计 2.2管理员的功能设计 2.3医生的操作界面为 2.4系统功能结构三.微信端登录界面的实现 3.1用户注册功能的实现 3.2登录功能的界面实现四.用户角色功能的界面实现 4.1医生浏览功能的界面实现 4.2医生预约挂号功能的实现界面 4.3挂号记录管理功能的实现界面 4.4就诊记录功能的界面实现 4.6疾病料普浏览功能的实现界面 4.7在线答疑功能的实现五.医生角色功能的设计界面六.管理员功能的设计实现 6.1用户管理功能的实现
微信小程序底部导航栏目开发资料

微信小程序底部导航栏目开发我们先来看个效果图这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备阿里图标库 http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面点击下方的下载按钮在弹出框中选择了俩个不同颜色的图标选择64px大小即可,我选择的是png 然后下载下来起上别名将上述起好名字的图标保存到小程序
微信小程序如何使用云开发

微信小程序中的云开发想必大家还不是很熟悉,因为云开发也就是9月份上线的,相比之前大家对于数据库的存储都是用的是自己的服务器,接下来这篇文章主要为大家介绍下怎么使用云开发,网上看过很多文章感觉介绍的不是很详细,下面通过我个人亲身经历整理下自己的思路吧. 首先介绍下云开发主要的三大特点,目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库存储:在小程序前端直接上传/下载云
微信小程序后端Java接口开发的详细步骤

目录 1.搭建一个springboot项目并引入依赖 2.编写controller层 3.创建微信小程序项目微信小程序使用wx.request(OBJECT)来调用后端接口. 首先我们来一个简单案例 -- helloworld实现 1.搭建一个springboot项目并引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-
微信小程序自定义tabBar组件开发详解

本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下以下代码保存在github地址先看一看目录 template文件夹里存放tabbar模板. template/template.wxml <template name="tabBar"> <view class="tabBar"> <block wx:for="{{tabBar}}" wx:for-item="ite

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

相关推荐

随机推荐