微信小程序开发的基本流程_

一、注册微信小程序

在创建自己的微信小程序之前,首先需要注册小程序账号,有如下账号类型：

具体的注册流程,可以参考官方的简易教程

二、安装工具,创建项目

第一步：下载微信小程序开发者工具并安装，下载路径：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

进到下载界面后，根据自己的操作系统选择相应的链接进行下载，下载完成后进行安装。

第二步：安装登录工具

开发者工具安装完成后我们就可以将其打开，初次打开会需要用微信扫码登录，如下图，用手机微信扫一扫后确认登录就可以了。

第三步：选择一个项目类型

登录成功后，如果是第一次使用该工具会弹出选择项目类型的窗口，如下图：

第四步：创建一个项目

选择项目类型成功后，会弹出创建项目的窗口，如下图：

在创建过程中，如果选择的本地文件夹是个空文件夹会出来一个勾选项“建立云开发快速启动模版”，为方便初学者了解微信小程序的基本代码结构，请勾选此项，勾选后，开发者工具会帮助我们在开发目录里生成一个简单的 demo，如下图：

三、项目代码结构说明与开发

3.1,项目代码结构

点击开发者工具上侧导航的“编辑器”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。

1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。

2、 app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

　　我们注意到，在实例程序的代码中还有2个文件夹，一个是pages,一个是style,其中style是放通用样式的一个文件夹，pages是存放所有页面的文件夹。我们着重讲一下这个pages.

3.2,小程序页面文件构成

　在这个示例中，我们有七个页面，index 页面，即欢迎页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

index.wxml 是页面的结构文件：

<!--index.wxml-->
<view class="container"><!-- 用户 openid --><view class="userinfo"><buttonopen-type="getUserInfo"bindgetuserinfo="onGetUserInfo"class="userinfo-avatar"style="background-image: url({{avatarUrl}})"></button><view><text>jackson影琪</text>
</view>
</view><view class="text-title"><text>Hello world</text>
</view>
</view>

本例中使用了<view/>、<button/>、<text/>来搭建页面结构，绑定数据和交互处理函数。

index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

//index.js
const app = getApp()Page({data: {avatarUrl: './user-unlogin.png',userInfo: {},logged: false,takeSession: false,requestResult: ''},onLoad: function() {if (!wx.cloud) {wx.redirectTo({url: '../chooseLib/chooseLib',})return}// 获取用户信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {this.setData({avatarUrl: res.userInfo.avatarUrl,userInfo: res.userInfo})}})}}})},onGetUserInfo: function(e) {if (!this.logged && e.detail.userInfo) {this.setData({logged: true,avatarUrl: e.detail.userInfo.avatarUrl,userInfo: e.detail.userInfo})}},onGetOpenid: function() {// 调用云函数wx.cloud.callFunction({name: 'login',data: {},success: res => {console.log('[云函数] [login] user openid: ', res.result.openid)app.globalData.openid = res.result.openidwx.navigateTo({url: '../userConsole/userConsole',})},fail: err => {console.error('[云函数] [login] 调用失败', err)wx.navigateTo({url: '../deployFunctions/deployFunctions',})}})},// 上传图片doUpload: function () {// 选择图片wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: function (res) {wx.showLoading({title: '上传中',})const filePath = res.tempFilePaths[0]// 上传图片const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]wx.cloud.uploadFile({cloudPath,filePath,success: res => {console.log('[上传文件] 成功：', res)app.globalData.fileID = res.fileIDapp.globalData.cloudPath = cloudPathapp.globalData.imagePath = filePathwx.navigateTo({url: '../storageConsole/storageConsole'})},fail: e => {console.error('[上传文件] 失败：', e)wx.showToast({icon: 'none',title: '上传失败',})},complete: () => {wx.hideLoading()}})},fail: e => {console.error(e)}})},})

index.wxss 是页面的样式表：

/**index.wxss**/page {background: #f6f6f6;display: flex;flex-direction: column;justify-content: center;
}
.userinfo, .uploader, .tunnel {margin-top: 40rpx;height: 140rpx;width: 100%;background: #fff;border: 1px solid rgba(0, 0, 0, 0.1);border-left: none;border-right: none;display: flex;flex-direction: row;align-items: center;transition: all 300ms ease;
}.userinfo-avatar {width: 100rpx;height: 100rpx;margin: 20rpx;border-radius: 50%;background-size: cover;background-color: white;
}.userinfo-avatar:after {border: none;
}.userinfo-nickname {font-size: 32rpx;color: #007aff;background-color: white;background-size: cover;
}.userinfo-nickname::after {border: none;
}.uploader, .tunnel {height: auto;padding: 0 0 0 40rpx;flex-direction: column;align-items: flex-start;box-sizing: border-box;
}.uploader-text, .tunnel-text {width: 100%;line-height: 52px;font-size: 34rpx;color: #007aff;
}.uploader-container {width: 100%;height: 400rpx;padding: 20rpx 20rpx 20rpx 0;display: flex;align-content: center;justify-content: center;box-sizing: border-box;border-top: 1px solid rgba(0, 0, 0, 0.1);
}.uploader-image {width: 100%;height: 360rpx;
}.tunnel {padding: 0 0 0 40rpx;
}.tunnel-text {position: relative;color: #222;display: flex;flex-direction: row;align-content: center;justify-content: space-between;box-sizing: border-box;border-top: 1px solid rgba(0, 0, 0, 0.1);
}.tunnel-text:first-child {border-top: none;
}.tunnel-switch {position: absolute;right: 20rpx;top: -2rpx;
}.disable {color: #888;
}.service {position: fixed;right: 40rpx;bottom: 40rpx;width: 140rpx;height: 140rpx;border-radius: 50%;background: linear-gradient(#007aff, #0063ce);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);display: flex;align-content: center;justify-content: center;transition: all 300ms ease;
}.service-button {position: absolute;top: 40rpx;
}.service:active {box-shadow: none;
}.request-text {padding: 20rpx 0;font-size: 24rpx;line-height: 36rpx;word-break: break-all;
}
.text-title{
margin-top: 50%;
}
.text-title text{font-size: 96rpx;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

index.json 是页面的配置文件：

页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

{"pages": ["pages/index/index","pages/userConsole/userConsole","pages/storageConsole/storageConsole","pages/databaseGuide/databaseGuide","pages/addFunction/addFunction","pages/deployFunctions/deployFunctions","pages/chooseLib/chooseLib"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F6F6F6","navigationBarTitleText": "jackson影琪","navigationBarTextStyle": "black"}
}

运行结果如下：

手机预览

开发者工具上侧菜单栏，点击"预览"，扫码后即可在微信客户端中体验。