目录
认识小程序
简介：
微信(WeChat) 是腾讯公司于2011年1月21 日推出的一款为智能终端提供即时通信服务的应用程序。小程序、订阅号、服务号、企业微信（企业号）属于微信公众平台的四大生态体系，它们面向不同的用户群体，应用于不同的方向和用途。小程序是微信的一种新的开发能力，具有出色的用户使用体验，可以在微信内被便捷地获取和传播；订阅号为媒体和个人提供一种新的信息传播方式，构建信息发布者与浏览者之间更好的沟通与管理模式；服务号为企业和组织提供更强大的服务与用户管理能力，帮助企业快速实现全新的公众号服务平台；企业微信（公众号）为企业提供专业的通信工具、丰富的办公应用与应用程序接口(Application Programming Interface, API)，助力企业高效沟通与办公。
特征：
小程序嵌入微信之中，不需要下载安装外部应用，用户通过扫描二维码和搜索相关功能的关键词即可使用，具备无须安装、触手可及、用完即走、无须卸载的特性。小程序可以被理解为“镶嵌在微信的超级 App"。
- 无需安装：小程序内嵌于微信程序之中，用户在使用过程中无须在应用商店下载安装外部应用。
- 触手可及：用户通过扫描二维码等形式直接进入小程序，实现线下场景与线上应用的即时联通。
- 用完即走：用户在线下场景中，当有相关需求时，可以直接接入小程序，使用服务功能后便可以对其不理会，实现用完即走。
- 无需卸载：用户在访问小程序后可以直接关闭小程序，无须卸载。
场景：
- 简单的业务逻辑，"简单"是指应用本身的业务逻辑并不复杂.
- 低频率的使用场景, "低频度"是小程序使用场景的另一个特点.
我的第一个微信小程序
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%;
}运行效果：
微信开发者工具界面功能介绍
-
工具栏：
在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。
-
模拟区：
在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
-
文件目录区：
文件目录区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行文件和目录的创建，右键单击文件目录区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。
-
编辑区：
编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js 及.json 文件的操作，使用组合键能提高代码的编辑效率。常用的组合键如下表所示：
| 组合键 | 功能 | 组合键 | 功能 |
|---|---|---|---|
| Ctrl+S | 保存文件 | Ctrl+Home | 移动到文件开头 |
| Ctrl+[ | 代码行缩进 | Ctrl+End | 移动到文件结尾 |
| Ctrl+shift+[ | 折叠打开代码块 | Shift+Home | 选择从行首到光标处 |
| Ctrl+Shift+Enter | 在当前行上方插入一行 | Shift+End | 选择从光标处到结尾 |
| Ctrl+Shift+F | 全局搜索 | Ctrl+I | 选中当前行 |
| Shift+Alt+F | 代码格式化 | Ctrl+D | 选中匹配 |
| Alt+Up,Alt+Down | 上下移动一行 | Ctrl+Shift+L | 选择所有匹配 |
| Shift+Alt+Up(Down) | 向上（下）复制一行 | Ctrl+U | 光标回退 |
-
调试区：
调试区的功能是帮助开发者进行代码调识及排查有问题的区域。小程序系统为开发着提供了9个调试功能模块，分别是Console、Sources、Nekwork、Security、Storage、AppData、Wxml、Sensor和Trace。最右边的扩展菜单项“：”是定制与控制开发工具按钮，如下所示：
1）Console面板：
Console面板是控制台，是调试小程序的控制面板，当代码执行错误时，错误信息将显示在控制Console面板中，便于开发者排查错误。另外，在小程序中，开发者可以通过console.log语句将信息输出到Console面板中。此时，开发者可以在Console面板直接输入代码并调试。
2）Sources面板：
Sources 面板是源文件调试信息页，用于显示当前项目的脚本文件，调试区左侧显示的是源文件的目录结构，中间显示的是选中文件的源代码，右侧显示的是调试相关按钮。
3）Network面板：
Network面板是网络调试信息页，用于观察和显示网络请求request和socket等网络相关的详细信息。
4）Securit面板：
Security面板是安全人证信息页，开发者可以通过该面板调试当前的网页的安全和认证等问题。如果安全设置安全论证，则会显示“The security of this page is unknown.”
5）Storage面板：
Storage 面板是数据存储信息页，开发者可以使用 wx.setStorage 或者 wx.setStorageSync将数据存储到本地存储，存储在本地存储中的变量及值可以在 Storage 面板中显示。
6）AppDate面板：
AppData面板是实时数据信息页，用于显示被激活的所有页面的数据情况。开发者在这里不仅可以查看数据的使用情况，还可以更改数据。编辑器会实时地将数据的变更情况反映到前端界面。
7) Wxml面板:
Wxml 面板是布局信息页，主要用于调试 Wxml 组件和相关CSS 样式，显示 Wxml 转化后的界面。Wxml面板调试区的左侧部分是Wxml代码，右侧部分是该选择器的CSS样式。
8）Sensor面板：
Sensor 面板是重力传感器信息页，开发者可以在这里选择模拟地理位置来模拟移动设备表现，用于调试重力感应 API。
9）Trace面板：
Trace面板是路由跟踪信息页，开发者在这里可以追踪连接到电脑中的安卓设备的路由信息。
总结：
本章主要是介绍了微信小程序，讲解了微信小程序的特征及微信小程序应用场景的特点，以及介绍了微信小程序的简要代码，最后了解了微信小程序开发工具的使用。
671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
