微信小程序实战-第7章 小程序开发框架

微信小程序实战-第7章 小程序开发框架

7.1.1模块

模块的定义和使用：

定义

module.exports = {
  welcome: 'welcome'
}

使用

var welcome = require('../utils/welcome.js')
Page({
  data: {},
  onLoad: function() {
      …
   } 
})

7.1.2模板

模板的定义和使用：

定义

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用

<import src="item.wxml" />
Page({
  data: {
    item: {
      index: 0, msg: 'this is a template',
      time: '2019-01-15'}}
})

template组件is属性：

is属性

<template name="odd">…
</template>
<template name="even">…
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

7.1.3自定义组件

component-tag-name.js

Component({
  properties: {
    value: {type: String,value: 'default value',}
  },
  data: {hello: '欢迎'},	
  methods: {}
})

component-tag-name.json

{
  "component": true
}

自定义组件结构和样式：
component-tag-name.wxml

<view class="red" bindtap="onTap">
  {{hello}} {{value}}
</view>
<slot></slot>

component-tag-name.wxss

.red {
  color: red;
}

自定义组件使用：

index.json

{
  "usingComponents": {
    "my-component": "/components/component-tag-name"
  }
}

index.wxml

<view>
  <my-component value="test value">
    <!-- 在此处编写的内容将会插入到组件slot中 -->
    <view>示例内容</view>
  </my-component>
</view>

自定义组件案例：

components\custom-component.wxml

<custom-component>
  <view class="list" wx:for="{{list}}" wx:key="*this">
    <text>我是第{{item}}项</text>
  </view>
  <button bindtap="addItem">add</button>
  <button bindtap="delItem">del</button>
</custom-component>

components\custom-component.wxss

.list {
  text-align: center;
  background-color: #ccc;
  border-top: 1rpx solid #fff;
}

components\custom-component.wxss

.list {
  text-align: center;
  background-color: #ccc;
  border-top: 1rpx solid #fff;
}

components\custom-component.js

Component({
  data: { list: [1, 2, 3, 4, 5]}, 
  methods: {
    addItem: function () {…},
    delItem: function () {…}}
})

pages/index/index.json

{
  "usingComponents": {
    "list": "/components/custom-component"
  }
}

pages/index/index.wxml

<list></list>

7.1.4插件

打开微信开发者工具，创建一个插件项目：

components\custom-component.js

Component({
  data: {list: [1, 2, 3, 4, 5]}, 
  methods: {
    addItem: function () {…},
    delItem: function () {…}
}
})

插件配置文件：

plugin/plugin.json

{
  "publicComponents": {
    "list": "components/list/list"
  },
  "main": "index.js"
}

plugin/index.js

var data = require('./api/data.js')
module.exports = {
  getData: data.getData,
  setData: data.setData
}

插件使用配置过程：

miniprogram/app.json

{
  "pages": [
    "pages/index/index"
  ],
  “plugins”: {…}
  }
}

miniprogram/pages/index/index.json

{
  "usingComponents": {
    "list": "plugin://myPlugin/list"
  }
}

在页面中使用插件：

miniprogram/pages/index/index.wxml

<list />

miniprogram/pages/index/index.js

var plugin = requirePlugin("myPlugin")
Page({onLoad: function() {plugin.getData()}})

7.2 小程序基础样式—WeUI

7.2.1初识WeUI

7.2.2【案例】电影信息展示

WeUI中navbar实现导航栏效果：

导航栏wxml

<view class="weui-tab">
  <view class="weui-navbar">
    <block wx:for-items="{{tabs}}" wx:key="{{index}}">
</block>…    
</view>
</view>

导航栏js

data: {
  tabs: ['正在热映', '搜索', '分类'], activeIndex: 0,	…},
tabClick:function(e){},

正在热映wxml

<view class="weui-panel weui-panel_access">
  <view class="weui-panel__hd">电影列表</view>
  <view class="weui-panel__bd">
</view>
…</view>

正在热映js

contents: […],
poster: 'http://xxx/xxx.jpg'

搜索页面效果展示：

搜索框下方热搜词

<view class="weui-search-bar">
  <view class="weui-search-bar__form">
    <view class="weui-search-bar__box">…
    </view>
  </view>
</view>

搜索页面效果展示：

正在热映热搜词

<view class="weui-flex">
  <view class="weui-flex__item">
   …
  </view>
</view>
<view class="weui-flex">
</view>
<view class="weui-flex">
</view>

正在热映热搜词

<view class="">
  <block wx:for-items="{{grids}}" wx:key="{{index}}">
…
  </block>
</view>

grids: [
  '爱情', '剧情', '喜剧', '家庭', '动画', '文艺', '战争', '动作', '科幻'
],

7.3 使用Vue.js开发小程序

7.3.1初识mpvue

7.3.2开发工具

7.3.3项目结构

7.3.4【案例】计数器

计数器代码实现：

index.vue代码

<template>…</template>
<script>
import store from './store'
export default {}, methods: {}
</script>
<style>
…
</style>

7.4 小程序组件化开发框架

7.4.1初识WePY

7.4.2开发工具

7.4.3项目结构

WePY项目目录app.wpy入口文件：

app.wpy

import wepy from 'wepy';
……
export default class extends wepy.app {
  config = {"pages":[],"window":{}}
  globalData = {}
  onLaunch() {
    console.log(this);
  }

WePY项目目录首页index.wpy页面：

index.wpy

import wepy from 'wepy';
export default class Page extends wepy.page {
…}
<template lang="wxml">
  <counter1></counter1>
</template>
<style lang="less">
…
</style>

7.4.4【案例】商品展示

创建index.wpy文件，template组件使用：

index.wpy

<template>
  <panel>
    <view class="wrapShop" wx:for="{{list}}" wx:key="id">
…
</view>
  </panel>
</template>

创建index.wpy文件，style标签区域编写样式代码：

index.wpy

.wrapShop {border: 1rpx solid #ccc; margin-top: -1rpx; display: flex;
  flex-direction: row; align-items: center; height: 278rpx;}
.info {margin-left: 30rpx;}
…

创建index.wpy文件，script区域编写js代码：

index.wpy

import wepy from 'wepy'
import Panel from '@/components/panel' 
export default class Index extends wepy.page {
  config = {navigationBarTitleText: '商品展’}
  components = {panel: Panel}
  data = {list: […]}}

本章总结

本章主要讲解了小程序的模块化开发和各种框架的使用。通过本章的学习，读者应掌握如何在小程序中进行模块化开发，提高代码的可复用性；了解小程序开发中常用的一些框架和库的特点，熟悉WeUI库、mpvue框架、WePY框架的基本使用。