小程序之开发教程（一）

一，介绍微信小程序

微信小程序是小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序上线要求不能大于2M。如果小程序非常复杂 , 必须超过2M， 可通过分包处理的方案，完成需求。按照功能 , 把小程序分成若干个功能包每一个包不能超过2M , 在配置文件中 整合成一个项目上传 ，目前为止，整个小程序能够达到20M；

小程序	App
大小有限制 , 不能超过2M(功能相对局限性)	大小没有限制 (功能更加强大)
不用安装 , 不用更新 (方便)	需要到对应的商城下载 , 定期更新(复杂)
打开方式 , 一丢丢麻烦 (先打微信->小程序) 使用频率低	打开方式非常方便 , 直接在桌面点击 , 使用频率高
跨平台 (写一次 , 运行在所有平台) 上线简单	IOS版 , 安卓版 (小米 , 应用 , 华为 .....) 上线麻烦
成本非常非常便宜	成本非常非常贵

二，注册微信小程序

如果你还没有微信公众平台的账号，请先进入微信公众平台首页，点击 “立即注册” 按钮进行注册。

注册的账号类型可以是订阅号、服务号、小程序以及企业微信，我们选择 “小程序” 即可。

接着填写账号信息，需要注意的是，填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。

激活邮箱之后，选择主体类型为 “个人类型”，并按要求登记主体信息。主体信息提交后不可修改，该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体，在后续开通其他业务功能时不得变更或修改。 

三，微信开发者工具

下载微信web开发者工具，根据自己的操作系统下载对应的安装包进行安装即可。

1. 新建项目

2. 页面介绍

4. 项目组成

pages：这个目录下放的就是小程序的页面

utils：这里面存的都是一些公用的js，提供公共方法减少冗余和维护难度的

app.js:整个微信小程序相关的全局js，这里有监听整个小程序的生命周期函数和全局变量；

app.json：是对整个小程序的静态全局配置，我们可以在这个文件中配置小程序是由哪些页面组成（路由），配置小程序的窗口背景色、配置导航条样式，配置默认标题，可以配置整个项目的样式，超时时间，加载的插件等等；(注意该文件不可添加任何注释)；

app.wxss文件：整个小程序的样式文件，针对每个页面的css文件的内容不同，加载到对应页面的css样式时，当前页面的wxss文件会覆盖app.wxss文件（估计跟普通的css样式的覆盖规则类似）。

project.config.json文件: 这个其实是每个开发者工具生成的项目都有的，但和项目内容实际没有特别大关联，主要是记录相关工具的配置的，在工具上做的任何配置都会写入到这个文件，
当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

sitemap.json文件: 这个可以配置是否允许被微信索引，具体看微信官方文档-sitemap 配置

5. app.json 配置说明

app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置 tab 等。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/home/index"
  ],

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },

  "tarBar": {
    "color": "#000",
    "selectedColor": "#56abe4",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [{
      "pagePath":"pages/home/index",
      "text": "首页",
      "iconPath": "image/home.png",
      "selectedIconPath": "image/home_on.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "image/log.png",
      "selectedIconPath": "image/log_on.png"
    },{
      "pagePath": "pages/index/index",
      "text": "我的",
      "iconPath": "image/fly.png",
      "selectedIconPath": "image/fly_on.png"
    }]
  },
  
  "networkTimeout": {
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  },
  "debug":true
}

☘️1、详情配置项

属性	类型	必填	描述	最低版本
entryPagePath	string	否	小程序默认启动首页
pages	string[]	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部 tab 栏的表现
networkTimeout	Object	否	网络超时时间
debug	boolean	否	是否开启 debug 模式，默认关闭
functionalPages	boolean	否	是否启用插件功能页，默认关闭	2.1.0
subpackages	Object[]	否	分包结构配置	1.7.3
workers	string	否	Worker 代码放置的目录	1.9.90
requiredBackgroundModes	string[]	否	需要在后台使用的能力，如「音乐播放」
requiredPrivateInfos	string[]	否	调用的地理位置相关隐私接口
plugins	Object	否	使用到的插件	1.9.6
preloadRule	Object	否	分包预下载规则	2.3.0
resizable	boolean	否	PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭	2.3.0
usingComponents	Object	否	全局自定义组件配置	开发者工具 1.02.1810190
permission	Object	否	小程序接口权限相关设置	微信客户端 7.0.0
sitemapLocation	string	是	指明 sitemap.json 的位置
style	string	否	指定使用升级后的weui样式	2.8.0
useExtendedLib	Object	否	指定需要引用的扩展库	2.2.1
entranceDeclare	Object	否	微信消息用小程序打开	微信客户端 7.0.9
darkmode	boolean	否	小程序支持 DarkMode	2.11.0
themeLocation	string	否	指明 theme.json 的位置，darkmode为true为必填	开发者工具 1.03.2004271
lazyCodeLoading	string	否	配置自定义组件代码按需注入	2.11.1
singlePage	Object	否	单页模式相关配置	2.12.0
supportedMaterials	Object	否	聊天素材小程序打开相关配置	2.14.3
serviceProviderTicket	string	否	定制化型服务商票据
embeddedAppIdList	string[]	否	半屏小程序 appId	2.20.1
halfPage	Object	否	视频号直播半屏场景设置	2.18.0
debugOptions	Object	否	调试相关配置	2.22.1
enablePassiveEvent	Object或boolean	否	touch 事件监听是否为 passive	2.24.1
resolveAlias	Object	否	自定义模块映射规则
renderer	string	否	全局默认的渲染后端	2.30.4
rendererOptions	Object	否	渲染后端选项	2.31.1
componentFramework	string	否	组件框架，详见相关文档	2.30.4
miniApp	Object	否	多端模式场景接入身份管理服务时开启小程序授权页相关配置，详见相关文档
static	Object	否	正常情况下默认所有资源文件都被打包发布到所有平台，可以通过 static 字段配置特定每个目录/文件只能发布到特定的平台(多端场景) 相关文档

☘️ 2、pages配置项

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息。

pages配置项要注意三点：

1) 数组的第一项用于设定小程序的初始页面。
2）小程序中新增/减少页面，都需要对pages数组进行修改。
3）文件名不需要写文件后缀。小程序框架会自动去寻找路径.json、.js、.wxml、.wxss这四类文件进行整合。

☘️ 3、window配置项

window用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。	iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持
homeButton	boolean	default	在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键	微信客户端 8.0.24
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。 详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)
restartStrategy	string	homePage	重新启动策略配置	2.8.0
initialRenderingCache	string		页面初始渲染缓存配置，支持 static / dynamic	2.11.1
visualEffectInBackground	string	none	切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none	2.15.0
handleWebviewPreload	string	static	控制预加载下个页面的时机。支持 static / manual / auto	2.15.0

☘️ 3、tabBar配置项

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置 项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom / top
custom	boolean	否	false	自定义 tabBar，见详情	2.5.0

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

☘️ 4、networkTimeout

这个是网络请求的超时时间的配置，这个配置不是必须的，你不写也是可以的，因为它这个都是有默认的值的，你如果有特别的需要，你可以按照以下的规则进行配置。

配置的代码如下：

"networkTimeout": {
  "request": 20000,
  "connectSocket": 20000,
  "uploadFile": 20000,
  "downloadFile": 20000
},

注意！！！ *.json格式文件里面是不能添加注释的， *.js，*.wxml，*.wxss这三个文件是可以添加注释的。

6. app.js 

app.js就是用户刚开始进入小程序执行的内容，其中就是执行了app（{}），这里面写的函数或者全局变量都会被执行。app()函数用来注册一个小程序，它必须在app.js中调用，且只能执行一次。

新建项目的app.js如下：

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },

  // 全局数据
  globalData: {
    userInfo: null
  }
})

进入到app()里面就会执行，onLaunch这个函数，因为这是直接触发的事件，我们最开始进来时，那个获取头像的功能就是在这里实现的。其中还有几个函数可以调用：

 

可以调用其中几个来看一下，如下：

App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
 
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
 
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  onShow:function(){
    console.log("从后台到前台")
  },
  onHide:function(){
    console.log("从前台到后台")
  },
  globalData: {
    userInfo: null,
    testnum:1
  }
})

其中调用了onShow,onHide等两个函数，函数面的console.log就是在调试器的console页面里打印上面写的那些“从前台到后台”等文字，可表示这个程序执行了，类似与C语音里面的print一个字符串什么的。

7. app.wxss的配置问题

wxss是一套样式语言，用于描述wxml的组件样式，app.wxss中的样式为全局样式，作用于每个页面。新建项目的app.wxss文件如下：

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

app.wxss就是对整个小程序样式的一个设置，比如一开始的那个页面，里面显示头像的位置以及用户名的文字大小及位置这些配置都是在*.wxss文件里设置，这里还是遵循“远亲不如近邻”这个规则，container正如它的名字一样，这是一个容器，可以把一些配置信息装在里面，以 （class=“container”）的形式调用。

其中，可配置的内容有：

/**app.wxss**/
.container {
  height: 100%;
  /* 高度自适应 */
  display: flex; 
  /* 纵向排列 */
  flex-direction: column;
  /* 每项居中 */
  align-items: center;  
  /* 两端居中   */
  justify-content: space-between;
  /* 两端对齐，项目之间的间隔都相等 */
  padding: 200rpx 0;
  /* padding表示内边距，就是控制上下左右的边距，
  padding：5px；带一个参数，表示上下左右都是5px距离
  padding：5px 0；带两个参数，表示上下都是5px，左右都是0px，这里容易出错，请切记
  padding：5px 4px 3px 2px；带4各参数，表示上5px，右4px，下3px，左2px */
  box-sizing: border-box;
  /* 自适应的边框 */
} 

8. 新建页面

☘️ 1、在pages文件夹新建 ceshi 页面

这样新的页面就建好了我们来看看都有什么？

ceshi.wxml 模板文件
ceshi.js   业务逻辑
ceshi.wxss 样式
ceshi.json 页面配置

☘️ 2. 将新建的页面配置到app.json 中 pages配置项

！！！把新建的文件路径调到最上面那就是主页了，意思就是，第一个路径就是首页的路径!

☘️ 3. ceshi.json 页面配置

"enablePullDownRefresh": true,  //允许下拉刷新
"backgroundTextStyle": "dark",  //背景文字颜色
"backgroundColor":"#f70",  //背景颜色
"usingComponents":{}  //组件

！！！json要求严格语法，不能有多余的注释和逗号！