详解微信小程序开发(项目从零开始)

微信开发者工具是微信官方提供的集成了开发、调试、实时预览的开发工具，可用于小程序和小游戏的开发调试，官方提供了详细的 文档 ，在使用前需先下载并安装。

一、新建项目

1. 进入开发者工具，点击新建项目

2. 填写项目信息（名称，文件夹，AppID）

3. 选择项目类型（小程序），开发模式（自己填写）

二、目录结构说明

- app.js  // 小程序逻辑
- app.json  // 小程序全局配置
- app.wxss // 小程序全局样式表
- pages // 存放小程序页面相关文件
  - index // index页面文件夹
    - index.js // index页面逻辑
    - index.json // index页面配置
    - index.wxss // index页面样式表
    - index.wxml // index页面结构
  - logs // logs页面文件夹
    - logs.js // logs页面逻辑
    - logs.json // logs页面配置
    - logs.wxss // logs页面样式表
    - logs.wxml // logs页面结构
- utils // 存放工具函数
  - util.js // 工具函数

三、小程序页面的创建

在小程序中，页面分为四个文件：WXML（XML格式描述文件）、WXSS（样式表）、JS（逻辑处理文件）和JSON（配置文件）。

1. 创建页面

1. 在上方文件夹（pages）里右键，新建文件夹作为新的页面文件夹

2. 在新建的文件夹中新建四个文件：WXML、WXSS、JS和JSON

2. WXML（XML格式描述文件）

WXML描述了这个页面的结构，可以支持大部分HTML标签和事件绑定，但不支持所有的CSS样式。

示例：

<!-- pages/index/index.wxml -->
<view class="container">
  <text>{{ message }}</text>
</view>

3. WXSS（样式表）

WXSS描述了这个页面的样式，类似于CSS，但他只支持大部分CSS，不支持所有的CSS。

示例：

/* pages/index/index.wxss */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

4. JS（逻辑处理文件）

JS描述了这个页面的逻辑和事件处理。

示例：

// pages/index/index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    message: 'Hello World'
  },
  onLoad: function () {
    console.log('index page onLoad')
  }
})

5. JSON（配置文件）

JSON描述了这个页面的一些配置，比如页面的标题、导航栏背景色等等。

示例：

// pages/index/index.json
{
  "navigationBarTitleText": "首页",
  "usingComponents": {}
}

四、小程序API的使用

小程序API提供了非常多的接口，可以访问微信服务端，获取用户信息和其他的功能。

以下是示例代码，实现获取用户信息的功能：

// pages/index/index.js
// 登录
wx.login({
  success: res => {
    // 发送 res.code 到后台换取 openId, sessionKey, unionId
  }
})
// 获取用户信息
wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      // 已经授权，可以直接调用 getUserInfo 获取头像昵称
      wx.getUserInfo({
        success: res => {
          // 可以将 res 发送给后台解码出 unionId
          this.setData({
            userInfo: res.userInfo
          })
        }
      })
    }
  }
})

五、小程序发布

小程序开发完成后，需要进行发布，才能够被用户访问使用。

1. 将代码上传至微信公众平台

2. 提交代码审核

3. 审核通过后，小程序会在微信中对搜索到的用户开放

以上就是详解微信小程序开发的完整攻略。