Drupal8+微信小程序：2，把示例代码跑起来

                   作者：老葛 亚艾元软件      

  打开安装好的微信web开发者工具程序：

 

 

图8-2-2-1

 

双击以后，我们进入这样的界面，需要扫码：

 

图8-2-2-2

   扫码成功后，看到了我的信息：

 

图8-2-2-3

 

这里选择本地小程序项目。我们进入一个添加项目页面：

 

 

图8-2-2-4

在这里输入项目名称，项目目录，注意项目目录文件夹里面为空：

 

图8-2-2-5

 

选中在当前目录中创建quick start项。最后点击“确定”按钮。我们进入了微信小城的示例界面：

 

图8-2-2-6

 

接下来，需要熟悉微信开发者工具的使用，就是将它的每个菜单选项都熟悉一下，点点看看。

 

图8-2-2-7

 

打开示例程序所在目录：

 

图8-2-2-8

 

这个目录下面包含4个文件：

app.json： 配置信息

app.js： 逻辑代码

app.wxss： 微信小程序的CSS代码。

project.config:项目配置文件

展开pages，我们看到里面包含index，logs两个目录：

 

图8-2-2-9

 

 

 

图8-2-2-10

 

每个页面大概包含四个部分：

js :逻辑代码

wxml：模板文件

wxss：微信样式

json：配置文件

 

   这里的代码，没有多少，我建议大家手动用笔抄写一遍。我对于学习新的技术，一贯的态度就是动动手，其中对于第一次看到的代码，都是用手抄写一遍，以加强记忆。

   我们来看一下，index页面的逻辑代码：

const app = getApp()

 

Page({

  data: {

    motto: 'Hello World',

    userInfo: {},

    hasUserInfo: false,

    canIUse: wx.canIUse('button.open-type.getUserInfo')

  },

  //事件处理函数

  bindViewTap: function() {

    wx.navigateTo({

      url: '../logs/logs'

    })

  },

  onLoad: function () {

    if (app.globalData.userInfo) {

      this.setData({

        userInfo: app.globalData.userInfo,

        hasUserInfo: true

      })

    } else if (this.data.canIUse){

      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

      // 所以此处加入 callback 以防止这种情况

      app.userInfoReadyCallback = res => {

        this.setData({

          userInfo: res.userInfo,

          hasUserInfo: true

        })

      }

    } else {

      // 在没有 open-type=getUserInfo 版本的兼容处理

      wx.getUserInfo({

        success: res => {

          app.globalData.userInfo = res.userInfo

          this.setData({

            userInfo: res.userInfo,

            hasUserInfo: true

          })

        }

      })

    }

  },

  getUserInfo: function(e) {

    console.log(e)

    app.globalData.userInfo = e.detail.userInfo

    this.setData({

      userInfo: e.detail.userInfo,

      hasUserInfo: true

    })

  }

})

对应的模板文件：

<!--index.wxml-->

<view>

  <view>

    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

    <block wx:else>

      <image bindtap="bindViewTap" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

      <text>{{userInfo.nickName}}</text>

    </block>

  </view>

  <view>

    <text>{{motto}}</text>

  </view>

</view>

在页面的js逻辑里面，定义一个Page， 里面data部门定义的数据，可以传递到wxml模板文件中直接使用。bindViewTap是定义的一个事件处理函数，我们可以根据需要定义多个这样的函数。onLoad，类似于Drupal里面的钩子函数，由微信小程序系统本身定义，当一个微信小程序页面加载时，会调用对应页面的onLoad函数。在这里，我们调用 app.getUserInfo，成功后，将返回的用户信息，通过setData，设置为data里面的userInfo。

 

模板文件里面，直接调用了逻辑代码里面，data部分的定义的数据。

{{userInfo.nickName}}

{{motto}}

    采用两个大括号，表示模板里面的变量。如果你用过angular、vue的话，你会发现，和angular的很类似。

这里面，使用了类似数据绑定的概念，js里面data数据，会传递给模板文件。

 

常用框架的数据传递方式：

Jquery : 操纵 DOM

Angularjs、Vue ： 数据绑定来代替

React ：虚拟DOM，

微信小程序： 数据绑定， 双向绑定，单向绑定

 

Onload：微信小程序定义的接口，类似于Drupal里面的钩子，或者事件分发。

在小程序显示的时候，隐藏的时候，退出的时候，都有对应的系统函数可供调用，我们可以在这里面，实现自己的逻辑。

 

 

setData的使用

That.setData  最好这样设置

That.data.motto = ‘123’ 这样的设置，有问题。

 

   模板文件中的逻辑指令：

wx:if

wx:else

  类似的执行有很多，可以参考官方文档。

 

   对于页面里面元素，点击操作，我们可以为它绑定一个响应事件，这里是通过：bindtap="bindViewTap"

   完成的。

 

{{userInfo.avatarUrl}}

 

{{}}

 

   其它需要注意：

这个示例，用到了小程序的缓存，获取缓存，设置缓存：

    var logs = wx.getStorageSync('logs') || []

    logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

每个小程序缓存有个大小限制，印象中是 20M，大体够用。

 

rpx， 这里的r： response，响应式，自适应。

 

程序跑起来了，我们需要改动一下，比如把首页面里面的文字做以下修改：

Hello word:  你好 Demo

Wechat :  Demo Title

找到修改的地方，完成这个任务。说明我们能够在示例的基础之上，对代码修改修改。很多时候，我们只是代码的搬运工。

 

最初的工具版本，开始有个配置，在线版本工具里面，通过点击“工具”>> “项目详情”，看到项目设置：

 

 

图8-2-2-11

 

   下面的四个复选框，开始我都是选中的。特别是最后一个。后来开发好了以后，上传到微信小程序后台，才发现，需要使用https。这里特别强调的一点事，最终我们是需要配置https的。