微信小程序开发流程

一、项目的生成

   1.在微信公众号平台创建小程序项目

   2.安装微信小程序开发工具，使用注册的开发者微信登录该工具进入后界面如下：

            

      3.点击加号位置，使用微信公众号平台创建小程序项目获取到的appid，输入项目名称“order-system”,选定本地文件夹作为项目目录，后端服务可以根据你的需求来选择，最后点击：新建

      

     4.至此项目生成成功，可以通过该平台进行编辑和调试

       

二、项目目录及文件构成

     目录结构显示，在小程序项目的根目录下面包含3个app开头的文件（app.js、app.json、app.wxss）以及pages目录与utils目录。其中pages目录存放了2个页面（index和log）的构成文件。每个页面都是一个目录，目录名就是唯一的页面名，其下由以页面名为前缀的2~4个文件组成。

小程序的目录文件结构如上，左侧的3个app文件必须放在小程序根目录下面，其他文件由开发者自由控制。

1.app.js是小程序的脚本代码，用来监听并处理小程序的生命周期、声明全局变量、调用框架提供的丰富API等；

2.app.json是对整个小程序的全局配置，配置小程序是由哪些页面组成，配置小程序的窗口背景颜色、配置导航条样式、配置默认标题等。（json文件中不可以加注释）

3.app.wxss是整个小程序的公共样式表。

　其中app.js和app.json是必需的。

小程序页面是由同路径下同名不同后缀的2~4个文件组成：

1..js后缀的文件是脚本文件。

2..json后缀的文件是配置文件。（如存在，会层叠覆盖app.json的window中相同的配置项，json文件中不可以加注释）。

3..wxss后缀的样式表文件。（如存在，会层叠覆盖app.wxss中的样式规则）。

4..wxml后缀的文件是页面结构文件。

    其中.js文件和.wxml文件时必需的。

微信小程序中的每一个页面的“路径+页面名”都需要写在app.json的pages中，且pages中的第一个页面是小程序的首页。

三、开发过程

   1.创建新的页面并实现跳转到新页面

       a、在pages文件夹中创建新的页面（包含四个文件）

       b、在需要跳转到新页面的界面文件中添加接口位置，并通过bindtap绑定事件处理函数

 <view bindtap='bindViewDemo'>打开Demo页面</view>

       c、在对应的js界面中添加事件处理函数 

  bindViewDemo: function () {
    wx.navigateTo({
      url: '../demo/demo'
    })
  },