小结:
本章介绍了微信小程序,讲解了微信小程序的特征及微信小程序应用场景的特点,重点讲解了微信小程序项目的开发流程,最后介绍了微信小程序开发工具的使用。
index.js
// index.js
// const app = getApp()
const { envList } = require('../../envList.js');
Page({
data: {
showUploadTip: false,
powerList: [{
title: '云函数',
tip: '安全、免鉴权运行业务代码',
showItem: false,
item: [{
title: '获取OpenId',
page: 'getOpenId'
},
// {
// title: '微信支付'
// },
{
title: '生成小程序码',
page: 'getMiniProgramCode'
},
// {
// title: '发送订阅消息',
// }
]
}, {
title: '数据库',
tip: '安全稳定的文档型数据库',
showItem: false,
item: [{
title: '创建集合',
page: 'createCollection'
}, {
title: '更新记录',
page: 'updateRecord'
}, {
title: '查询记录',
page: 'selectRecord'
}, {
title: '聚合操作',
page: 'sumRecord'
}]
}, {
title: '云存储',
tip: '自带CDN加速文件存储',
showItem: false,
item: [{
title: '上传文件',
page: 'uploadFile'
}]
},{
title: '云模板',
tip: '基于页面模板,快速配置、搭建小程序页面',
tag: 'new',
page: 'singleTemplate',
}, {
title: '云后台',
tip: '开箱即用的小程序后台管理系统',
page: 'cloudBackend',
}, {
title: '云托管',
tip: '不限语言的全托管容器服务',
link: 'https://cloud.weixin.qq.com/cloudrun',
}],
envList,
selectedEnv: envList[0],
haveCreateCollection: false
},
onClickPowerInfo(e) {
const index = e.currentTarget.dataset.index;
const powerList = this.data.powerList;
const selectedItem = powerList[index];
selectedItem.showItem = !selectedItem.showItem;
if (selectedItem.link) {
wx.navigateTo({
url: `../web/index?url=${selectedItem.link}&title=${selectedItem.title}`,
});
} else if (selectedItem.page) {
wx.navigateTo({
url: `/pages/${selectedItem.page}/index`,
});
} else if (selectedItem.title === '数据库' && !this.data.haveCreateCollection) {
this.onClickDatabase(powerList);
} else {
this.setData({
powerList
});
}
},
onChangeShowEnvChoose() {
wx.showActionSheet({
itemList: this.data.envList.map(i => i.alias),
success: (res) => {
this.onChangeSelectedEnv(res.tapIndex);
},
fail (res) {
console.log(res.errMsg);
}
});
},
onChangeSelectedEnv(index) {
if (this.data.selectedEnv.envId === this.data.envList[index].envId) {
return;
}
const powerList = this.data.powerList;
powerList.forEach(i => {
i.showItem = false;
});
this.setData({
selectedEnv: this.data.envList[index],
powerList,
haveCreateCollection: false
});
},
jumpPage(e) {
wx.navigateTo({
url: `/pages/${e.currentTarget.dataset.page}/index?envId=${this.data.selectedEnv.envId}`,
});
},
onClickDatabase(powerList) {
wx.showLoading({
title: '',
});
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.selectedEnv.envId
},
data: {
type: 'createCollection'
}
}).then((resp) => {
if (resp.result.success) {
this.setData({
haveCreateCollection: true
});
}
this.setData({
powerList
});
wx.hideLoading();
}).catch((e) => {
console.log(e);
this.setData({
showUploadTip: true
});
wx.hideLoading();
});
}
});
index.json
{
"usingComponents": {
"cloud-tip-modal": "/components/cloudTipModal/index"
}
}
index.wxml
<!--index.wxml-->
<view class="container">
<view class="title">快速了解云开发</view>
<view class="top_tip">免鉴权接口调用 免部署后台 高并发</view>
<view class="power" wx:key="title" wx:for="{{powerList}}" wx:for-item="power">
<view class="power_info" data-index="{{index}}" bindtap="onClickPowerInfo">
<view class="power_info_text">
<view class="power_info_text_title">
{{power.title}}
<view class="power_info_text_tag" wx:if="{{power.tag}}">{{power.tag}}</view>
</view>
<view class="power_info_text_tip">{{power.tip}}</view>
</view>
<image wx:if="{{!power.showItem && power.item.length}}" class="power_info_more" src="../../images/arrow.svg"></image>
<image wx:if="{{power.showItem && power.item.length}}" class="power_info_less" src="../../images/arrow.svg"></image>
<image wx:if="{{!power.item.length}}" class="power_item_icon" src="../../images/arrow.svg"></image>
</view>
<view wx:if="{{power.showItem}}">
<view wx:key="title" wx:for="{{power.item}}">
<view class="line"></view>
<view class="power_item" bindtap="jumpPage" data-page="{{item.page}}">
<view class="power_item_title">{{item.title}}</view>
<image class="power_item_icon" src="../../images/arrow.svg"></image>
</view>
</view>
</view>
</view>
<view class="environment" bindtap="onChangeShowEnvChoose">当前环境 {{ selectedEnv.alias }}</view>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>
</view>
index.wxss
/**index.wxss**/
page {
padding-top: 54rpx;
background-color: #f6f6f6;
padding-bottom: 60rpx;
}
.title {
font-family: PingFang SC;
font-weight: 500;
color: #000000;
font-size: 44rpx;
margin-bottom: 40rpx;
}
.top_tip {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #888888;
margin-bottom: 28rpx;
}
.power {
margin-top: 30rpx;
border-radius: 5px;
background-color: white;
width: 93%;
padding-bottom: 1rpx;
}
.power_info {
display: flex;
padding: 30rpx 25rpx;
align-items: center;
justify-content: space-between;
}
.power_info_more {
width: 30rpx;
height: 30rpx;
transform: rotate(90deg);
}
.power_info_less {
width: 30rpx;
height: 30rpx;
transform: rotate(270deg);
}
.power_info_text {
display: flex;
flex-direction: column;
}
.power_info_text_title {
margin-bottom: 10rpx;
font-weight: 400;
font-size: 35rpx;
display: flex;
align-items: center;
}
.power_info_text_tag {
margin-left: 20rpx;
background-color: #fbe0e0;
color: #e54545;
padding: 0 7px;
font-size: 14px;
vertical-align: middle;
border-radius: 3px;
}
.power_info_text_tip {
color: rgba(0, 0, 0, 0.4);
font-size: 25rpx;
}
.power_item {
padding: 30rpx 25rpx;
display: flex;
justify-content: space-between;
}
.power_item_title {
font-size: 30rpx;
}
.power_item_icon {
width: 30rpx;
height: 30rpx;
}
.line {
width: 95%;
margin: 0 auto;
height: 2rpx;
background-color: rgba(0, 0, 0, 0.1);
}
.environment {
color: rgba(0, 0, 0, 0.4);
font-size: 24rpx;
margin-top: 25%;
}
p.20最后一题作业
运行代码
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: '简易计算器☞',
userInfo: {},
defaultSize: 'default',
disabled: false,
iconType:'info_circle'
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
toCalc:function(){
wx.navigateTo({
url:'../calc/calc'
})
},
onLoad: function () {
console.log('onLoad');
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
代码执行结果