如何开发微信小程序？
小程序开发
UI设计
浏览：1296 次
1、 页面开发部
nbsp； ；当我们接手一个小程序开发项目时，首先要做的是根据产品文档和UI设计草案分解任务。
1.任务分解
nbsp； ；任务分解也称为工作分解结构（WBS），即按照一定的原则将一个项目分解为任务，然后将任务分解为工作项，然后将工作项分配给每个人的日常活动，即：项目→ 任务→ 工作→ 日常活动。对于小程序这样的项目，我们可以根据以下原则大致拆分任务：
页面开发是一个子任务
通用组件包是一个子任务
公共接口封装是一个子任务
……
2.分工与合作
nbsp； ；提高效率的方法之一是分工和协作。通常，项目的开发涉及多人。然后，我们可以根据上述任务分解和工时估算，以及每个人可以投入的时间比例，将每个任务落实到相应的人身上；
2、 通用模块的包装
1.封装模块
nbsp； ；为了创建applet项目目录，开发人员工具本身已经帮助我们生成了大部分目录和文件结构。此外，我们将根据要封装的内容添加相应的存储路径。下面是一个示例：
微信功能（型号）
登录和注销
获取用户的头像和手机号码
地理定位、地址、地图导航
读/写存储
组件
搜索框
获取定位组件
业务接口（模块）
请求后端接口
身份验证检查
公共服务配置和参数
脱敏后的目录结构如下：
；wxapp公司
；├── app。js nbsp；#小程序逻辑文件
；├── app。json#小程序的配置文件
；├── app。wxss编号全局通用样式文件
；☆ -- 组件#公共组件包的存储
；├── 配置nbsp；#存储与业务相关的配置js文件
；├── 图像nbsp；#存储本地图片
；├── 模型nbsp；#微信功能封装
；├── 模块nbsp；#存储业务接口的封装，例如登录接口封装
；├── 第页nbsp；#用于存储小程序的页面
；│；├── index#索引页
；│；│；├── 指数js nbsp；#页面逻辑
；│；│；├── 指数json#页面配置
；│；│；├── 指数wxml#页面结构
；│；│；└── 指数wxss编号页面样式表
；├── 项目配置.json
；└── 实用程序nbsp；#用于存储工具类（如网络请求）的封装
nbsp； ；└── 实用程序js
2.使用模块
nbsp； ；让我们看一个实际的例子。当我们跳转到一个页面，当前页面需要使用身份验证模块进行身份验证时，在对业务代码进行脱敏处理后，我们只查看密钥调用：
//#模块/auth.js
导出默认值{
。。。
；检查：函数（）{
//身份验证检查
}
。。。
}
在页面中使用：
//#pages/index.js
从“../../model/auth”导入authModel
第页({
onLoad（）{
；authModel.check（）。则（（res）=>{
nbsp；//做某事
}）。捕获（（e）=>{
nbsp；//捕获e
）
}
})
nbsp； ；如果你有开发前端VUE的经验，你应该对以上内容有很好的理解。事实上，不仅模块的封装和调用，页面组件的封装和呼叫也与VUE非常相似。您可以引用组件的路径和名称，在wxml中插入相应的组件标记，传入相应的属性，并从emit接收事件方法。
nbsp； ；让我们看一个组件封装和使用的示例。例如，小程序中有一个“商店导航”页面，其中有一个商店名称的搜索框，以及脱敏业务代码后的主要流程：
；├── 组件nbsp；#保存组件页面
；│；├── 搜索输入#
；│；│；├── searchInput。js nbsp；# ；
；│；│；├── searchInput。json# ；
；│；│；├── searchInput。wxml#nbsp；
；│；│；├── searchInput。wxss# ；
在页面中使用：
//#pages/index.json
{
“”；
