微信小程序开发
- 开发之前
-
- 注册
- 准备
-
- 技术准备
- 环境准备
- 开始编码
-
- 创建项目
- 基本设置
- 实现Tab Bar导航
- 实现"找TA"页面
-
- 实现后的样子
-
- Profile组件实现
开发之前
本人不是微信小程序的行家，但是有3个线上小程序的开发体会，一路下来，经验不多踩坑不少，在这里留下来希望能给爱好小程序的同学们一点点借鉴！描述不当之处，敬请拍砖。如果你有意愿一同合作开发优化，请留言给我我就开源给你~
给大家讲解的顺序是正序手法，是个人认为的最合理的流程，也就是说肯定有殊途同归的其他做法，但是为了简单直接容易上手，文中不赘述就只捡干货了。
讲解的方式是实例讲解，目标是实现一个完整的已经上线的小程序，名字叫“35IT”，您可以在微信小程序里搜索先行体验再回头阅读下面的内容，它麻雀虽小五脏俱全，对于初学者相信不会让你失望的。
注册
通过这个 这里检查一下！
- 个人的小程序审核很慢。我个人提交的审核通常要2-3天能有反馈；以企业主体提交的审核非常快，不超过1小时。而且我提交的3个小程序都是1次通过，深度怀疑是自动审核的，而个人主体的小程序绝对是人工审核的，慢且严格是可以理解的。如果你在应用商店上传APP，对此一定深有体会。
此外，如果你是以企业主体开发的小程序，官方需要验证你的主体身份，你如果有银行对公账户，可以省去1笔人工审核费用~
准备
技术准备
小程序开发相对简单，需要的最基本的技术能力是Javascript(或Typescript) + CSS，这对于Web开发人员是非常平滑的。在数据存储方面，在项目初期阶段，建议采用云开发，此时需要你了解Mongo DB，因为这相比你使用自己的服务器，开发成本和经济成本要低很多。
环境准备
从这里下载开发环境并安装，当前只有Windows和MAC OS版本。
开始编码
创建项目
打开“微信开发者工具”->Project->New Project
需要填写的“App ID”这样查找： 登录官网->设置->基本设置->帐户信息->AppID(小程序ID)，形如"wxe0a884bcd3f8b8e1"
基本设置
Setting->General Setting->Editor
- 把"Save File"下的几个选项全部选中
- Tab Size: 设置为“4”
工具栏->Cloud Base，根据提示设置你的云开发，用它的好处是：
- 不需要你自己另行准备数据库
- 不需要另行开发Web Service
实现Tab Bar导航
-
创建页面
View->Open View->Explorer->找到 “pages"目录->右键->New Folder->取名"browse”->在新建的"browse"目录下右键->New Page->取名“browse”
这样就创建了browse页面，用同样的方式再创建message和my页面
-
配置tabbar
打开 app.json文件（Edit->Jump to File 或 Ctrl + P）
填加如下内容，其中的文件路径你自行配置，其中用到的图片，建议使用这里的，能省掉你不少力气。
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#d4237a",
"borderStyle": "black",
"list": [
{
"selectedIconPath": "./images/find_it_active.png",
"iconPath": "images/find_it_black.png",
"pagePath": "pages/browse/browse",
"text": "找TA"
},
{
"selectedIconPath": "./images/chat_active.png",
"iconPath": "images/chat.png",
"pagePath": "pages/message/message",
"text": "聊聊"
},
{
"selectedIconPath": "images/my_active.png",
"iconPath": "images/my_black.png",
"pagePath": "pages/my/my",
"text": "我的"
}
]
}
这时，通过 工具栏->Simulator，你应该能看到：
实现"找TA"页面
实现后的样子
这个页面对应的是browse,图中的中间象框部分是主体内容,具体实现为“组件(component)”，组件和常见的input、text一样，为“重用”而存在，在“35IT”中有两个地方使用它，一个是该页面对用户（姑且叫ITer）画像的展现（只读），另一个用户画像的编辑（可写），即便你实现的某个部分不被重用即只用一次，只要逻辑上是一个整体，实现为组件也是有百利而无一害。
下面来看怎么实现这个组件profile
Profile组件实现
- 创建组件
View->Open View->Explorer->在miniprogram/components目录右键->New Folder->取名为"profile"->在创建好的profile目录右键->New Component->取名为"profile"
- 配置组件
这样，一个零功能的组件就创建好了，把它在app.json中配置一下，即可被其他页面或组件引用了:
- 使用组件
我们要在browse页面引用这个组件，如下图，你可以只保留红框内的部分，然后查看效果 保存->Tools->Compiled->工具栏点击Simulator
在模拟器看到“components/profile/profile.wxml”这个字样的输出，说明它已经正常工作了，但是它毫无用处，我们希望它能和其他组件一样，通过属性配置它，并让它长得好看一点有用一点。
我们希望象下面这样使用它，其中的"config"，就是属性，“captionChanged”是我们自定义的事件，就跟常见的点击事件一样：
并希望它长成这个样子：
- 功能实现
- profile.js
编辑 profile.js为如下内容
这里再说明一下，如果你想全面系统地学习小程序的方方面面，请移步官方文档，我这里的讲解方式是为了让你快速走通流程，然后你可以以此为线索横向展开，再进行更为深入地学习。
回归正题，图中的
properties.config
就是自定义属性，在定义时要指定类型，可选指定默认值。这里要注意的是，如果你定义的多个属性有相互依赖关系，那么请把它合在一起，即合并定义成
object
类型的属性，否则将会造成不必要的多次更新。
properties.config
的赋值是这样的：
properties.config
的每次赋值都会触发
observers.config
这个函数的执行，这个函数内的逻辑通常都会含有
this.setData
的调用，在本例中设置了
_profile
、
_config_part
、
_selected_item
的值，组件的wxml文件中绑定到这几个
data
的组件都会自动更新。
-
profile.wxml
这个文件定义了ITer画像的轮廓，相框的每个部分均类似如下的代码片段：
<view class="flex_row_no_border {{ _selected_item==='基础' ? 'selected' : 'selected-no' }}" data-item="基础" bindtap="click">
<text>基础</text>
<image src="../../images/profile/jichu.png"></image>
</view>
和它对应的代码为：
setItem: function (caption) {
if (!this.data._profile) return
this.data._config_part.items = object.filterByValue(this.data._profile, i => i.category === caption)
this.data._config_part.born = this.data._profile["生年"] ? this.data._profile["生年"].value : undefined
this.setData({
_selected_item: caption,
_config_part: this.data._config_part,
})
},
click: function (e) {
const caption = e.target.dataset.item || e.currentTarget.dataset.item
this.setItem(caption)
this.triggerEvent("captionChanged", caption)
}
其中的控件属性
data-item
是高频使用的（可以是
data-xxx
），把数据绑定到它，并能在响应函数
bindtap
中通过
e.target.dataset.item
（
e.target.dataset.xxx
）获取它
- 待更…