## 开发入门知识 1，当你准备开发一个微信小程序的时候，你首先需要一个小程序的 APPId ，在微信公众号官网可以获得。 2，你还需要准备微信开发者工具，官网同样有下载，下载安装即可，支持windows，linux，和MAC平台。 3，小程序使用的微信自己开发 MINA 框架,提供了视图层描述语言，WXML 和 WXSS 以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。 打开的时候会自动提示创建一个demo，demo结构文件树如下：  4，其中app.js、app.json、app.wxss 是必不可少的，是小程序生成的依赖文件。 app.js 监听并控制这整个程序的生命周期，也是全局变量声明的地方。 ### 1.微信小程序目录结构  ### 1.1 小程序的文件格式介绍 在项目中我们可以看到四种文件类型： .js后缀的文件是脚本文件，页面的交互等代码在这里实现； .json后缀的文件是配置文件，主要是json数据格式存放，用于设置程序的配置效果； .wxss后缀的是样式表文件，类似于前端中的css,用于对界面进行美化； .wxml后缀的文件是页面结构文件，用于构建页面，在页面上增加控件。 ### 1.1 pages目录介绍 pages:主要存放小程序的页面文件，其中每个文件夹为一个页面，每个页面包含四个文件，.wxml文件是界面文件，.js是事件交互文件，用于处理界面的点击事件等功能；.wxss为界面美化文件，让界面显示的更加美观；.json为配置文件，用于修改导航栏显示样式等，小程序每个页面必须有.wxml和.js文件，其他两种类型的文件可以不需要。 注意：文件名称必须与页面的文件夹名称相同，如index文件夹，文件只能是index.wxml、index.wxss、index.js和index.json. ### 1.2 utils #### 微信小程序-调用工具js文件/utils文件中的函数/变量 在小程序中，定义了一项工具文件utils,此文件的js旨在本文件之内有效，当其他子页面想调用其中的js方法或者变量时，需要两步骤： 1：在utils被调用的js文件中，面向对象的方式模型输出： module.exports={要调用的函数名称：要调用的函数名称 }； 2：在要调用的js文件中模块化引入utils的js文件 var object=require("utils被调用的js文件地址")； 可以输出一下object就能看到被调用的方法了； 例子如下： utils中被调用的js： var paycenter = { [k1]: 'http://paycenter.yuanfeng021.com/', [k2]: 'aaaaaabbb', [k3]: 105 } // 要引用这个文件的函数或者变量，除了在要引用的的js文件中模块化之外（var utils=require('js地址')）， // 在被引用的的js中要通过 module.exports={a:a}作为面向对象的变量输出函数如下： module.exports={ URl:paycenter,//要引用的函数 xx:xx } 要调用的js文件： // 获得工具utils工具js里面函数,先模块化引用utils里面的js地址 reqiure('js地址')成一个面向对象 var fileData=require('../../utils/config.js') // console.log(fileData) 可查看获得的函数 console.log(fileData.URL) 输出结果：  该文件件主要用于存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。 ### 1.3 app.js、app.json、app.wxss app.js : 系统的方法处理文件，主要处理程序的声明周期的一些方法；例如：程序刚开始运行时事件处理等 app.json : 系统全局配置文件，设置导航头的颜色，字体大小，下面有没有tabbar等功能，具体页面的配置在页面的json文件中单独修改； app.wxss : 全局的界面美化代码 ### 此项目目录结构 ### 目录结构概览 小程序 目录 ├─component 自定义插件目录 │ ├─toastTest 自定义插件文件夹 │ │ └─toastTest.wxml │ │ └─toastTest.js │ │ └─toastTest.wxss ├─image 存放图片 ├─pages 存放小程序的页面文件 │ ├─address_list.php 收货地址列表页面 │ │ └─address_list.wxml │ │ └─address_list.js │ │ └─address_list.wxss │ │ └─address_list.json │ ├─address_opera 新增收货地址页面 │ │ └─address_opera.wxml │ │ └─address_opera.js │ │ └─address_opera.wxss │ │ └─address_opera.json │ ├─address_opera_edit 编辑收货地址页面 │ │ └─address_opera_edit.wxml │ │ └─address_opera_edit.js │ │ └─address_opera_edit.wxss │ │ └─address_opera_edit.json │ ├─address_select 选择收货地址 │ │ └─address_select.wxml │ │ └─address_select.js │ │ └─address_select.wxss │ │ └─address_select.json │ ├─buy_step1 结算页面 │ │ └─buy_step1.wxml │ │ └─buy_step1.js │ │ └─buy_step1.wxss │ │ └─buy_step1.json │ ├─cart 购物车页面 │ │ └─cart.wxml │ │ └─cart.js │ │ └─cart.wxss │ │ └─cart.json │ ├─favorites 商品收藏页面 │ │ └─favorites.wxml │ │ └─favorites.js │ │ └─favorites.wxss │ │ └─favorites.json │ ├─favorites_store 店铺收藏页面 │ │ └─favorites_store.wxml │ │ └─favorites_store.js │ │ └─favorites_store.wxss │ │ └─favorites_store.json │ ├─index 首页页面 │ │ └─index.wxml │ │ └─index.js │ │ └─index.wxss │ │ └─index.json │ ├─member 我的（个人中心）页面 │ │ └─member.wxml │ │ └─member.js │ │ └─member.wxss │ │ └─member.json │ ├─member_evaluation 评价订单页面 │ │ └─member_evaluation.wxml │ │ └─member_evaluation.js │ │ └─member_evaluation.wxss │ │ └─member_evaluation.json │ ├─member_evaluation_again 查看商品评价 │ │ └─member_evaluation_again.wxml │ │ └─member_evaluation_again.js │ │ └─member_evaluation_again.wxss │ │ └─member_evaluation_again.json │ ├─order_detail 订单详情页面 │ │ └─order_detail.wxml │ │ └─order_detail.js │ │ └─order_detail.wxss │ │ └─order_detail.json │ ├─order_list 订单列表页面 │ │ └─order_list.wxml │ │ └─order_list.js │ │ └─order_list.wxss │ │ └─order_list.json │ ├─product_detail 商品详情页面 │ │ └─product_detail.wxml │ │ └─product_detail.js │ │ └─product_detail.wxss │ │ └─product_detail.json │ ├─product_evalute 商品评价页面 │ │ └─product_evalute.wxml │ │ └─product_evalute.js │ │ └─product_evalute.wxss │ │ └─product_evalute.json │ ├─product_first_categroy 分类页面 │ │ └─product_first_categroy.wxml │ │ └─product_first_categroy.js │ │ └─product_first_categroy.wxss │ │ └─product_first_categroy.json │ ├─search 搜索页面 │ │ └─search.wxml │ │ └─search.js │ │ └─search.wxss │ │ └─search.json │ ├─search_list 搜索结果列表页面 │ │ └─search_list.wxml │ │ └─search_list.js │ │ └─search_list.wxss │ │ └─search_list.json │ ├─search_store 店铺搜索页面 │ │ └─search_store.wxml │ │ └─search_store.js │ │ └─search_store.wxss │ │ └─search_store.json │ ├─select 绑定账号页面 │ │ └─select.wxml │ │ └─select.js │ │ └─select.wxss │ │ └─select.json │ ├─store 店铺首页页面 │ │ └─store.wxml │ │ └─store.js │ │ └─store.wxss │ │ └─store.json │ ├─store_goods 店铺全部商品页面 │ │ └─store_goods.wxml │ │ └─store_goods.js │ │ └─store_goods.wxss │ │ └─store_goods.json │ ├─store_goods_list 店铺搜索结果列表页面 │ │ └─store_goods_list.wxml │ │ └─store_goods_list.js │ │ └─store_goods_list.wxss │ │ └─store_goods_list.json │ ├─store_goods_update 店铺上新商品页面 │ │ └─store_goods_update.wxml │ │ └─store_goods_update.js │ │ └─store_goods_update.wxss │ │ └─store_goods_update.json │ ├─store_list 店铺列表页面 │ │ └─store_list.wxml │ │ └─store_list.js │ │ └─store_list.wxss │ │ └─store_list.json │ ├─utils 工具文件 │ │ └─config.js 配置文件 │ │ └─utils.js │ ├─wxParse 插件 ├─app.js 配置接口地址前缀 ├─app.json 全局json配置 ├─app.wxss 全局css配置 ├─ project.config.json 小程序系统配置