微信小程序学习报告

13 Apr 2018

系统分析与设计课程项目技术分享博客

团队：ChickenDinner8

作者：15331314 wlm

我的博客传送门

由于我在团队项目当中负责的是客户端前端开发，即微信小程序的开发。因此自学了一些微信小程序的相关知识，并写下这篇技术学习报告，同时它也是一篇工具使用方法，因为我们在开发小程序的过程中使用到了 开发者工具。

一、注册微信小程序

登录微信公众平台，注册微信小程序。注册完毕后，会得到一个AppID。后续的相关开发都会使用到这个AppID。

二、阅读开发者文档

因为以前没有接触过微信的小程序开发框架，因此在开发之前要详细阅读小程序开发文档。

框架的核心是一个响应的数据绑定系统。整个系统分为视图层（View）和逻辑层（App Service）。数据绑定可以让数据与试图保持同步，当数据修改时，只需要在逻辑层修改数据，试图层就会做相应的更新。

具体学习到的是框架中的以下几种功能，这些功能在我们小程序开发中都有着比较重要的作用。

数据绑定

由于点餐系统存在着大量的数据修改，因此数据绑定可以较方便地使我们的视图层和逻辑层保持同步。

数据绑定使用双大括号将变量包起来，如：

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello World!'
  }
})

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，节课使数组中各项的数据重复渲染该组件。这也是我们在小程序中用到的一个比较有用的功能，因为需要显示的菜单其实是一个列表，用这种列表渲染的方式来在视图层中渲染菜单则比较简洁。

大致使用方法如下，其中也结合了数据绑定：

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'no.0',
    }, {
      message: 'no.1'
    }]
  }
})

模板

可以在模板中定义代码片段，然后在不同的地方调用。

首先应定义模板：

<template name="menuItem">
  <view>
    <text> Food: {{food.name}} </text>
    <text> Price: {{food.price}} </text>
  </view>
</template>

然后使用模板：

<view wx:for="{{food}}">
    <template is="menuItem" data="{{...food}}"/>
</view>

Page({
  data: {
    food: [{
      name: cola,
      price: '$5'
    }, {
      name: ice-cream,
      price: '$10'
    }]
  }
})

最终利用模板简洁地渲染出一个菜单列表。

三、开发者工具的使用

输入AppID，创建本地项目
页面十分简洁好用：
ctrl+s保存之后即可预览编译后的页面，点击 预览 即可上传代码包，并在手机微信上预览小程序

四、WeUI框架部署

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

首先在官网下载 WeUI-for 小程序
解压后将 /源码包/dist/style/weui.wxss 复制到对应的小程序目录：
```
|_ pages
|_ app.wxss
|_ weui.wxss
|_ .....
```
在app.wxss中引用weui.wxss：
```
/**app.wxss**/
@import 'weui.wxss';
```

部署完毕之后，就能用WeUI框架里的组件组件编写wxml了：

<view class="page">
  <view class="page__hd">
    <view class="page__title">title</view>
    <view class="page__desc">description</view>
  </view>
</view>

五、总结

学习了以上技能后，终于写出了Eat点点小程序的第一个主页。当然还有许多要改的地方以及许多要学的。

EatDemo