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

   <p>这一篇文章我们主要的是介绍一下小程序的一些目录结构，以及一些语法，为我们后面的微信小程序商城系统做铺垫。</p>    <p>首先我们来了解下小程序的目录结构</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1e93f3bd18a99e99d3d1863d9c7066d7.png"></p>    <p>Pages 我们新建的一些页面将保存在这个文件夹下面，每一个 小程序页面 是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。 .js 后缀的文件是脚本文件， .json 后缀的文件是配置文件， .wxss 后缀的是样式表文件， .wxml 后缀的文件是页面结构文件。</p>    <p>Utils 我们写的一些公共的工具js可以放里面。</p>    <p>app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/23eee2eb205307d3f837804347b5b87e.png"></p>    <p>app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。</p>    <pre>  <code class="language-javascript">{      "pages":[        "pages/index/index",        "pages/logs/logs"      ],      "window":{        "backgroundTextStyle":"light",        "navigationBarBackgroundColor": "#fff",        "navigationBarTitleText": "WeChat",        "navigationBarTextStyle":"black"      }    }  </code></pre>    <p>注：app.json中是对整个小程序的全局设置，当然每个页面也有自己的json文件。每个页面下的json文件只能对window 进行设置，所以页面json文件下只需写入window的配置即可</p>    <pre>  <code class="language-javascript">{        "backgroundTextStyle":"light",        "navigationBarBackgroundColor": "#fff",        "navigationBarTitleText": "WeChat",        "navigationBarTextStyle":"black"      }       </code></pre>    <p>app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。</p>    <p>每个页面中也可以定义自己的wxss。Wxss也就是微信所提供的css样式表，里面的写法几乎和css差不多。不过他支持的选择器相对比较少。在写的时候我们以前的一些项目的css 基本可以拿过来用，不过除了下面这些选择器外，你使用了其他的选择器，可能使整个页面报错!</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e94a2e52f2c7c609e49254ec034ad597.png"></p>    <p>Index.whtml  wxml后缀的文件夹也就是微信小程序提供给我们的页面结构文档，就相当于我们以前的web页面的html 差不多，只不过他自定义了一些自己的标签。</p>    <p>接下来我们就新建一个页面来尝试下</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/76695b7b363a50362a53d6a3f077021c.png"></p>    <p>在pages 下新建页面test 注意新建的.js,.json,.xml,.wxss。和page 下定义的 test文件夹名称保持一致，微信微信小程序会自动读取这些文件，并生成小程序实例。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/eb0b6976bfdfa9307e82c655c6885ef8.png"></p>    <p>首先我们要在app.json下配置好我们刚新建的页面</p>    <p>注意:页面配置先后的顺序，在实际操作中发现，第一个配置的为首页。</p>    <p>配置好后我们就可以编写我们的页面代码。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2a5c6447490523b73f8e32bdcacb8254.png"></p>    <p>大家可以看到，我们在app.json 页面可以直接配置当前页面的一些window属性</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9ea2e78de714b3a7bdb844f24fdc63a7.png"></p>    <p>Wxml 中我们可以编写一些我们页面展示的结构，也就是我们以前写html一样。这中间我们使用到了 <view> 标签，他就相当于我们以前用的div 差不多。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/29b93dc02e6d27698a1d6f633499821d.png"></p>    <p>Wxss 大家看到是不是和我们以前写的css 差不多。这边是个我们之前定义的 .box 加一个样式。</p>    <p>test.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/61c075b7bbe3dd41bf8d236de7f19abc.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6fe165902f15fcd4957ad7a5eac36db2.png"></p>    <p>这边我们使用bintap给view绑一个点击事件然后再弹出一个提示框。</p>    <p>注意：这边js的写法和我们以前的写法完全一样，只不过这里面不能使用 window 对象和 document 对象，同样的也不能使用jquery ,zepto等框架，因为这些框架中会使用到window和document 对象。</p>    <p> </p>    <p> </p>    <p>来自：http://www.cnblogs.com/ywqu/p/6071601.html</p>    <p> </p>