一、首先从前端微信小程序开发说起

1.小程序前端代码github地址：https://github.com/xml123/books

2.首先要在微信公众平台注册开发者账号,申请个人开发者资质，可以按照微信提供的文档一步一步来，这里没什么好说的

3.首先在微信公众平台，申请一个个人开发的小程序，获得AppID（AppID比较重要，在接下来的很多地方都将用到），然后下载一个小程序开发工具，新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，最后，勾选 "创建 QuickStart 项目" （注意: 你要选择一个空的目录才会有这个选项），点击确定，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

5.首先看app.json文件，这是小程序的总配置文件，可以配置小程序的顶部颜色，文字等等，可以配置底部的tabbar，配置路由等，在tabBar里配置底部tabbar,在pages数组里面配置页面，如下

{
  "pages": [
    "pages/index/index",
    "pages/bookStore/bookStore",
    "pages/me/me",
    "pages/bookCity/bookCity",
    "pages/bookAbstract/bookAbstract",
    "pages/chapterDetail/chapterDetail",
    "pages/freeBooks/freeBooks"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "books",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark"
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#222222",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "发现",
        "iconPath": "images/find.png",
        "selectedIconPath": "images/find_select.png"
      },
      {
        "pagePath": "pages/bookCity/bookCity",
        "text": "书城",
        "iconPath": "images/books.png",
        "selectedIconPath": "images/books_select.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "images/me.png",
        "selectedIconPath": "images/me_select.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 60000
  }
}

pages数组里面的页面需要自己在左侧pages文件夹下新建目录，然后在目录里新建page,就会自动生成路由和对应的.js、.json、.wxml、.wxss等文件。

6.然后介绍一下app.js文件，该文件中主要是配置全局的变量和一些方法，每次小程序加载时，首先会加载该文件中的生命周期函数，可以在该文件中获取授权或是获取openid等等参数，以供全局使用。

App({
  onLaunch: function () {
    var that = this
    
    //登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        console.log('code',res.code)
        wx.request({
          url: that.globalData.url + '/api/get_auth',
          data: { 
            code: res.code
          },
          method: 'POST',
          header: { 'content-type': 'application/x-www-form-urlencoded' },
          success: function (res) {
            if(res.data.code == 200){
              wx.setStorageSync('openid', res.data.openid)
            }else{
              wx.showToast({
                title: '请求失败，请稍后重试',
                icon: 'none',
                duration: 2000
              })
            }
            console.log(res.data)
          },
          fail: function (e) {
            console.log('网络出错');
          }
        })
      }
    })
  },
  globalData: {
    //url:'https://api2.fang88.com',//正式环境
    // url:'https://apitest.fang88.com',//测试线上环境
    url: 'https://api.brightness.xin',
    urlImg: 'https://api.brightness.xin/static/image/',//图片前缀
    // url: 'http://192.168.0.109:9000',//测试环境
    // urlImg: 'http://192.168.0.109:9000/static/image/',//图片前缀
    // urlImgend:'?x-oss-process=style/pic_64x64'
    // urlImgend: '?x-oss-process=style/pic_100x100'
    // urlImgend: '?x-oss-process=style/pic_x60'
    // urlImgend: '?x-oss-process=style/index_pic'
    urlImgend: '?x-oss-process=style/728_488_crop',
    urlImgLayout: '?x-oss-process=style/mini_thumbnail'
    // urlImgend: '?x-oss-process=style/475_680_crop'
    // urlImgend: '?x-oss-process=style/640_400_crop'
  }
})

其中globalData中是全局变量的配置，url是自己的请求地址前缀，urlImg是图片地址前缀，剩下一些是oss相关东西，不需要的可以不用关注。然后在onLaunch函数中写了一个登录的方法，wx.login()是调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。该方法为微信内置方法，具体使用方法可看小程序开发文档，wx.request()为小程序的请求函数，在该方法内请求自己在后端定义的接口即可。

7.对于app.wxss文件为全局的css文件，这里不再详细说明

8.下面讲一下具体的页面，以index页面为例，其他页面不再一一讲解，有问题可以评论提出来，大家一起讨论学习。

9.首先是index.json文件

{
  "enablePullDownRefresh": false,
  "navigationBarTitleText": "发现"
}

其中enablePullDownRefresh是配置该页面是否开启当前页面的下拉刷新，默认是false,即不启用下拉刷新。navigationBarTitleText是指该页面顶部标题

10.主要看一下index.js文件，小程序的js运行机制以及使用方式有点像react和vue，都有自己的生命周期函数，以及元素渲染。

/**
   * 页面的初始数据
   */
  data: {
    swiperIndex: 1,  //当前所在轮播图索引
    bannerOne:{},    //第一张banner上的内容
    bannerTwo:[],    //第二张banner上的内容
    urlImg: getApp().globalData.urlImg,   //全局使用的图片前缀
  },

首先是data对象，为页面的初始数据，供全局使用，也是index.wxml里动态渲染数据的来源，想要在index.wxml中使用什么数据，就要在这定义。

下面说一下小程序的几个生命周期函数吧，主要用到的有onLoad函数，页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。可以在该函数中获取在页面路径中传过来的参数，最重要的是该函数为异步加载函数，所以一定要小心使用，其中有很多坑。在index.js中，我在该函数中调用了getBannerOne()函数，getBannerOne()函数是向后端发送请求获取banner上的内容，因为banner上的内容只需要在该页面打开后加载一次，在onLoad函数中调用，如果你的请求中需要一些其他的请求后得到的参数,比如在一开始的app.js文件中获取的openid,那这里你就需要小心一些了，因为onLoad函数为异步函数，小程序打开后加载的第一个页面我定义的是index页面，此时小程序会同时加载app.js文件和index.js文件中的onLoad()函数，所以可能你在onLoad中使用的openid在app.js文件中还未获取到，就造成了错误。有两种解决方案，仅供参考。

1）如果不是一定需要在onLoad函数中加载的方法，可以放到onShow()函数中使用，该生命周期函数为同步方法，会在app.js文件加载完成后加载，会在页面显示/切入前台时触发。

2）使用es6的Promise对象方法，这里不再细说，有兴趣可以看阮一峰老师的ECMAScript 6 入门里的Promise。

然后是onReachBottom函数,是页面上拉触底的事件函数，在上拉加载更多做分页的时候经常会用到。

最最常用的便是这三个生命周期函数，其他的几个生命周期函数在用到的时候在小程序文档中查看一下使用方法即可。

（附Page 实例的生命周期图）

11.然后简单的说一下index.wxml文件吧，该文件主要是ui展示的代码了，可以在{{}}中使用index.js中data中的值，更多的可以看我的github,例

<view class="updateLi">
   <image data-id="{{bannerOne.id}}" class="findImg" src="{{urlImg + bannerOne.bookImg}}" bindtap='toBook' />
     <view class="bookName">{{bannerOne.title}}</view>
     <view class="bookAuthor">{{bannerOne.author}}</view>
   <view class="readCount">300人在读</view>
</view>

12.最后吐槽一下小程序吧，坑很多，毕竟没开源，很多东西不支持，能支持的问题又很多，且行且珍惜

深蓝互联成立于2013年，是一家物联网硬件开发及软件应用服务商，获得多次获得国家高新技术企业资质的企业。深蓝互联专注软硬件技术开发的专业性技术公司。我们从事软硬件开发十年，擅长SaaS 平台开发、APP小程序开发、软硬件结合开发，在视觉识别处理、数据架构、云计算、多线程高并发和集群、数据安全加密和防护方便有很深的技术积累。

我们拥有专业优秀的设计和技术团队，以极具创意的 UI 设计、精湛卓越的开发技术，专业的网络策划团队。公司多年来投入打造物联网SaaS平台，集成了公司研发的多款智能物联网终端（智能鲜米机、生鲜售货机、自助洗车机、小区电瓶车充电系统等）。

公司一直坚持以研发为导向，打造软硬件结合的物联网平台系统。将一直坚持提高开发的技术实力更好的为我们的客户服务！

文章来自深蓝互联http://www.szdbi.com/webxt/244.html转载请注明出处！