You are here

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

                   作者:老葛 亚艾元软件      

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

 

8-2-2-1.png 

8-2-2-1

 

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

8-2-2-2.png 

8-2-2-2

   扫码成功后,看到了我的信息:

8-2-2-3.png 

8-2-2-3

 

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

 

8-2-2-4.png 

8-2-2-4

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

8-2-2-5.png 

8-2-2-5

 

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

8-2-2-6.png 

8-2-2-6

 

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

8-2-2-7.png 

8-2-2-7

 

打开示例程序所在目录:

8-2-2-8.png 

8-2-2-8

 

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

app.json: 配置信息

app.js: 逻辑代码

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

project.config:项目配置文件

展开pages,我们看到里面包含indexlogs两个目录:

8-2-2-9.png 

8-2-2-9

 

 

8-2-2-10.png 

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}}

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

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

 

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

Jquery : 操纵 DOM

AngularjsVue : 数据绑定来代替

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, 这里的rresponse,响应式,自适应。

 

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

Hello word:  你好 Demo

Wechat :  Demo Title

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

 

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

 

8-2-2-11.png 

8-2-2-11

 

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

 

 


Drupal版本: