本文档是基于本人第一次接触小程序的全过程学习步骤
步骤1：
可参见小程序官方简易教程：https://developers.weixin.qq.com/miniprogram/dev/
以下描述是基于上述教程的基础上实际上手内容
步骤2：
1、申请账号，根据指引申请账号之后获得开发者id
2、安装开发工具，根据教程指引下载安装
步骤3：新建项目：打开微信web开发者工具——选择小程序项目——选择一个空目录（也可直接选择一个项目打开，此处基于第一次新建项目）——AppID填写第一天获取到的开发者id——填写项目名称——若项目目录是空文件夹，则会显示下图第四点，一般选择普通快速启动模板
步骤4：代码构成，新建完一个快速模板之后，会生成如下文件：
1、app.json :
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地，app.json 的 pages 字段可以知道所有页面路径，于是微信客户端就把页面的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个页面。
关于app.json描述：
//当前小程序的全局配置，包含所有页面路径、界面表现、网络超时时间、底部tab等{ //pages ：用于描述当前小程序所有页面路径，用于指定小程序有哪些页面组成，每一项都对应一个页面的 路径+文件名 文件名不需要写后缀 框架会自动去寻找 对应位置的 4个文件 .json .js .wxml .wxss 进行处理 "pages":[ "pages/index/index", "pages/logs/logs" ], // window：全局默认窗口的表现，定义所有页面的顶部背景颜色，文字颜色等 "window":{ //下拉 loading 的样式，仅支持 dark / light "backgroundTextStyle":"light", //导航栏背景颜色 "navigationBarBackgroundColor": "#37383c", //导航连标题内容 "navigationBarTitleText": "大喵的小店", //导航栏标题颜色 "navigationBarTextStyle":"ffffff", //窗口背景色 "backgroundColor": "#eeeeee", //是否开启当前页面的下拉刷新 "enablePullDownRefresh": true }, //底部tab栏目的表现 "tabBar": { //tab 上的文字默认颜色，仅支持十六进制颜色 "color": "#b7b7b7", //tab 上的文字选中时的颜色，仅支持十六进制颜色 "selectedColor": "#AB956D", //tabbar上边框的颜色 "borderStyle": "#f5f5f5", //tab 的背景色，仅支持十六进制颜色 "backgroundColor": "#f5f5f5", //tab 的列表,最少2个、最多5个 tab "list": [ { //页面路径，必须在 pages 中先定义 "pagePath": "page/component/index", //图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 postion 为 top 时，不显示 icon "iconPath": "image/12.png", //选中时的图片路径 "selectedIconPath": "image/11.png", //tab 上按钮文字 "text": "首页" }, { "pagePath": "page/component/category/category", "iconPath": "image/22.png", "selectedIconPath": "image/21.png", "text": "分类" }, { "pagePath": "page/component/cart/cart", "iconPath": "image/32.png", "selectedIconPath": "image/31.png", "text": "购物车" }, { "pagePath": "page/component/user/user", "iconPath": "image/42.png", "selectedIconPath": "image/41.png", "text": "我的" } ] }, //网络超时时间 "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, //是否开启debug模式，默认是关闭的 "debug": false}2、小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:
//app.jsApp({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null }})
3、pages文件夹下面都是一个个的页面，一般新建项目之后pages下会有一个index文件夹里面包含4个文件，分别是：index.js,index.json,index.wxml,index.wss,即，每个页面都是有这四个文件组成的，index是首页，新建页面可以自定义，所有页面都需要在app.json的pages字段中描述，如下图：
步骤5：新建页面，以及页面各个文件描述，以下描述index页面，以及user页面
1、新建页面：
2、index页面详解：index.js,index.json,index.wxml,index.wss
- 关于首页底部tab栏目的表现、窗口背景色、导航栏的配置请详见步骤4，app.
json中的描述 - 网页编程采用的是 HTML + CSS + JS 这样的组合，其中
HTML是用来描述当前这个页面的结构，CSS用来描述页面的样子，JS通常是用来处理这个页面和用户的交互。在小程序中也有同样的角色，其中WXML充当的就是HTML的角色，wss充当的就是CSS的角色 - index.js：
- 页面初始化：
data是页面初始数据，onLoad生命周期回调—监听页面加载，类似还有onShow，onReady，onHide等
- 一个服务除界面展示，还需要和用户做交互：响应用户的点击、获取用户的位置等等。通过编写
JS脚本文件来处理用户的操作例如：
标签切换：
js代码：
对应的wxml代码：
跳转至详情页：点击图片或者文字页面跳转
js代码：
对应的wxml代码：
- index.wxml：描述当前这个页面的结构，采用MVVM 的开发模式，js只需要管理状态
- index.wss：WXSS 用来决定 WXML 的组件应该怎么显示：
- user页面：
js：//index.js//获取应用实例var app = getApp()var myData = require('../../utils/data')var util = require('../../utils/util')Page({ // 页面初始数据 data: { }, // 地址编辑 editAddr : function(e){ console.log(e) wx.navigateTo({ url:'../edit_addr/edit_addr?addrid='+e.currentTarget.dataset.addrid }) }, onLoad() { var self = this; /** * 获取用户信息 */ // wx.getUserInfo({ // success: function (res) { // self.setData({ // thumb: res.userInfo.avatarUrl, // nickname: res.userInfo.nickName // }) // } // }) }})wxml：
<!--user.wxml--><view class="container"> <view class="user_base_info"> <view class="user_avatar"> <!-- <image src="{{thumb}}" class="thumb"></image> --> <open-data type="userAvatarUrl"></open-data> </view> <view class="user_info"> <text> 昵称： </text> <open-data type="userNickName" lang="zh_CN"></open-data> </view> </view> <view class="user_addr_manage"> <view class="user_addr_title">【地址管理】</view> <block wx:for="{{addrDate}}" wx:key="item.id"> <view class="user_addr_item"> <text class="addr_sub">{{item}}</text> <view class="addr_edit" bindtap="editAddr" data-addrid="{{index+1}}"></view> </view> </block> <navigator url="../edit_addr/edit_addr" >新增地址 +</navigator> </view> </view>获取用户信息：最开始我用的wx.getUserInfo，但是小程序目前在测试版和体验版限制通过wx.getUserInfo({})获取弹出授权框。
<open-data type="groupName" open-gid="xxxxxx"></open-data><open-data type="userAvatarUrl"></open-data><open-data type="userGender" lang="zh_CN"></open-data>
如需完整项目源码请联系我，后续会更后端篇。。。>_<
