微信小程序入门及进阶详细指北

近期做了一个小程序课程项目（传送门)，在开发过程发现小程序开发涉及的东西非常多。官方有很详细的文档，网上相关的学习资源也很多。如果在开发之前对小程序涉及的东西进行大致的整理则可以有比较清晰的学习思路，方便按需查找文档和资源。

以下整理了近期学习小程序开发的一些收获，主要包含了学习的一些思路，官方文档及其他资源的使用参考，以及提供一些可以参考的示例。适合入门及有一定基础的小程序开发者参考。

入门准备

注册

在进行微信小程序开发之前，需要先注册一个小程序，用于获取appid以及后续的审核，发布和管理等。账号注册在微信公众平台即可注册。在页面底部即可看到如下流程提示：

注册完成后即可登录进入管理页面，最经常用到的便是开发相关的设置。获取appid，设置密钥，配置服务器地址等都在这里。

另外“管理->成员管理”部分则可以邀请团队其他成员一起开发，或者邀请其他人来体验已经开发完成的小程序。小程序有专门的开发工具，在首页即可看到小程序开发工具的下载及介绍。

申请域名和证书

这一步在一开始也可以跳过，但小程序发布上线的时候则要求后台服务器必须使用经过备案的域名及证书，否则无法请求服务器。在开发时如不想配置https服务器则需要在小程序代码的project.config.json中进行如下设置：

{
    //...其他设置
    "setting" {
        "urlCheck": false,
    }
    //...其他设置
}

设置完成后小程序即可访问任意服务器地址，包括localhost。

云开发

小程序还为我们提供了另一种便捷的开发方式，即小程序云开发，无需编写后端服务及配置服务器，便可以用js编写后台服务所需的逻辑，并上传到云端执行。小程序云开发为开发者提供的云环境基本能满足大多数需求，以下是在微信开发者工具中展示的云环境。云环境提供了数据库，存储，云函数的支持。

云开发的入门及使用均有详细的文档，详见云开发的官方文档。

入门开发

小程序开发的官方文档非常完整，开发的入门及API文档都很详细，基本上参考官方文档已经足够了。这一部分主要整理部分比较常用的文档/博客链接及一些可参考的建议。

快速上手

一开始快速入门可参考如下指南。

如果有vue基础会发现小程序的学习其实和vue很相似，有许多相似的特性。没有vue基础问题也不大，官方的文档及代码示例均很详细。阅读完指南和框架部分的文档基本就能了解小程序的风格和大致特性。

常用文档/资源

• 示例小程序：在微信中搜索“小程序示例”即可找到该小程序，其中包含了小程序提供的组件、接口和云开发示例。

• 界面交互api：显示弹窗，消息提示框等

• 小程序页面配置：配置页面的样式，路径，tab及其他常用特性（如支持页面下拉刷新）。

• 小程序常用框架介绍

• 官方框架 Wepy

• 解决方案：微信小程序解决方案 - 1KB javascript 覆盖状态管理、跨页通讯、插件开发和云数据库开发

• 挺好用的flex布局

• 小程序中使用async/await：方便处理异步调用

代码目录结构参考

可参考代码

├─api    // 对后端api服务调用的封装
├─components  // 可复用的组件
│  ├─card
│  └─mini-tab
│
├─libs  // 公用的js库，主用作用为引入对asycn/await的支持
├─mixins // 可复用的小程序组件行为（Behaviors）
├─pages  // 各个页面
│  ├─designQuestionaire
│  ├─fillInQuestionaire
│  ├─index
│  ├─login
│  ├─logs
│  ├─mine
│  ├─newtask
│  ├─profile
│  ├─submitSuccess
│  └─taskDetail
├─static   // 静态资源
│  ├─icons
│  └─imgs
├─store   // 全局状态管理模块
└─utils  // 常用的模块/函数

进阶

自定义组件

在项目中当有多个页面需要共用相似的组件或我们想定制专属的组件时，可以通过自定义组件来实现。自定义组件的目录结构和实现和页面很相似。这部分同样有详细的官方文档可参考。

以下主要以实现一个简单常用的tab页组件为例，并说明需要注意的一些问题。

源代码地址

效果：

该tab组件可以自定义tab的数量及，tab之间可滑动/点击切换，每个tab页也可以上下滚动。使用方式如下：

mini-tab.wxml文件：

  
    {{item}}
  
  
    
      
        
          
        
      
    
  

mini-tab.js

// components/mini-tab/mini-tab.js
Component({
  /**
   * 组件选项
   */
  options: {
    multipleSlots: true, /*使组件支持多个slot，并以name来区分slot*/
  },
  /**
   * Component properties
   */
  properties: {
    tabs: {
      type: Array,
      value: ['tab1', 'tab2', 'tab3']
    },
    current: {
      type: Number,
      value: 0
    }
  },

  /**
   * Component initial data
   */
  data: {

  },

  /**
   * Component methods
   */
  methods: {
    // 点击tab切换时触发该函数
    switchTab (e) {
      console.log(e)
      console.log(Number(e.currentTarget.id))
      this.setData({
        current: Number(e.currentTarget.id)
      })
    },
    tabChange (e) {
      console.log(e)
      this.setData({
        current: Number(e.detail.current)
      })
    }
  }
})

mini-tab.wxss

/*不要用“view，*”之类的选择器，以免影响外部样式 */
/* components/mini-tab/mini-tab.wxss */
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box {
  box-sizing: border-box;
}

.container {
  justify-content: flex-start;
  height: 100%;
}

.tab-bar {
  padding: 5rpx 20rpx;
  justify-content: space-around;
  background-color: #f8f8f8;
  color: #b6b6b6;
}

.tab-active {
  color: #323232;
}

.tab-bar-item {
  padding: 10rpx 10rpx;
  width: auto;
}

.content-box {
  flex: 1;
}

.tab-item-container {
  height: 100%;
}

.scroll-box {
  height: 100%;
}