1.本文档是基于本人第一次接触小程序的全过程学习步骤

2.步骤1：

3.可参见小程序官方简易教程：https://developers.weixin.qq.com/miniprogram/dev/

4.以下描述是基于上述教程的基础上实际上手内容

5.步骤2：

6.1、申请账号，根据指引申请账号之后获得开发者id

7.2、安装开发工具，根据教程指引下载安装

8.

9.步骤3：新建项目：打开微信web开发者工具——选择小程序项目——选择一个空目录（也可直接选择一个项目打开，此处基于第一次新建项目）——AppID填写第一天获取到的开发者id——填写项目名称——若项目目录是空文件夹，则会显示下图第四点，一般选择普通快速启动模板

10.

11.步骤4：代码构成，新建完一个快速模板之后，会生成如下文件：

12.

13.1、app.json:

14.微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地，app.json的pages字段可以知道所有页面路径，于是微信客户端就把页面的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个页面。

15.关于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}

16.2、小程序启动之后，在app.js定义的App实例的onLaunch回调会被执行:

//app.jsApp({onLaunch:function(){//调用API从本地缓存中获取数据varlogs=wx.getStorageSync('logs')||[]logs.unshift(Date.now())wx.setStorageSync('logs',logs)},getUserInfo:function(cb){varthat=thisif(this.globalData.userInfo){typeofcb=="function"&&cb(this.globalData.userInfo)}else{//调用登录接口wx.login({success:function(){wx.getUserInfo({success:function(res){that.globalData.userInfo=res.userInfotypeofcb=="function"&&cb(that.globalData.userInfo)}})}})}},globalData:{userInfo:null}})

17.

18.3、pages文件夹下面都是一个个的页面，一般新建项目之后pages下会有一个index文件夹里面包含4个文件，分别是：index.js,index.json,index.wxml,index.wss,即，每个页面都是有这四个文件组成的，index是首页，新建页面可以自定义，所有页面都需要在app.json的pages字段中描述，如下图：

19.

20.步骤5：新建页面，以及页面各个文件描述，以下描述index页面，以及user页面

21.1、新建页面：

22.

23.2、index页面详解：index.js,index.json,index.wxml,index.wss

24.

关于首页底部tab栏目的表现、窗口背景色、导航栏的配置请详见步骤4，app.json中的描述网页编程采用的是HTML+CSS+JS这样的组合，其中HTML是用来描述当前这个页面的结构，CSS用来描述页面的样子，JS通常是用来处理这个页面和用户的交互。在小程序中也有同样的角色，其中WXML充当的就是HTML的角色，wss充当的就是CSS的角色index.js：页面初始化：data是页面初始数据，onLoad生命周期回调—监听页面加载，类似还有onShow，onReady，onHide等一个服务除界面展示，还需要和用户做交互：响应用户的点击、获取用户的位置等等。通过编写JS脚本文件来处理用户的操作例如：

25.标签切换：js代码：对应的wxml代码：跳转至详情页：点击图片或者文字页面跳转js代码：对应的wxml代码：

index.wxml：描述当前这个页面的结构，采用MVVM的开发模式，js只需要管理状态index.wss：WXSS用来决定WXML的组件应该怎么显示：user页面：js：//index.js//获取应用实例varapp=getApp()varmyData=require('../../utils/data')varutil=require('../../utils/util')Page({//页面初始数据data:{},//地址编辑editAddr:function(e){console.log(e)wx.navigateTo({url:'../edit_addr/edit_addr?addrid='+e.currentTarget.dataset.addrid})},onLoad(){varself=this;/***获取用户信息*///wx.getUserInfo({//success:function(res){//self.setData({//thumb:res.userInfo.avatarUrl,//nickname:res.userInfo.nickName//})//}//})}})

26.wxml：

!--user.wxml--viewclass="container"viewclass="user_base_info"viewclass="user_avatar"!--imagesrc="{{thumb}}"class="thumb"/image--open-datatype="userAvatarUrl"/open-data/viewviewclass="user_info"text昵称：/textopen-datatype="userNickName"lang="zh_CN"/open-data/view/viewviewclass="user_addr_manage"viewclass="user_addr_title"【地址管理】/viewblockwx:for="{{addrDate}}"wx:key="item.id"viewclass="user_addr_item"textclass="addr_sub"{{item}}/textviewclass="addr_edit"bindtap="editAddr"data-addrid="{{index+1}}"/view/view/blocknavigatorurl="../edit_addr/edit_addr"新增地址+/navigator/view/view

27.获取用户信息：最开始我用的wx.getUserInfo，但是小程序目前在测试版和体验版限制通过wx.getUserInfo({})获取弹出授权框。

open-datatype="groupName"open-gid="xxxxxx"/open-dataopen-datatype="userAvatarUrl"/open-dataopen-datatype="userGender"lang="zh_CN"/open-data

28.如需完整项目源码请联系我，后续会更后端篇。。。_