微信小程序实战-第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框架的基本使用。