微信小程序开发基本流程一、微信小程序简介
1、微信小程序简称小程序。张小龙在微信公开课专业版发布的小程序于2017年1月9日正式上线。
2. 微信小程序一词可以分为“微信”和“小程序”两部分
（1)，这里的“微信”可以理解为“在微信中”，指的是小程序的执行环境；当然，微信在提供执行环境的同时，也延长了用户使用微信的时间。
（2)，“小程序”的意思是先是程序，然后才具有轻量的特点。与其他应用程序不同，小程序不需要安装，而是通过扫描二维码直接执行等；使用后无需卸载，这就是所谓的使用即走的原则。
3.微信小程序，很多类似的应用都采用类似的架构：
4. JSON() 是一种轻量级的数据交换格式。它基于（W3C 规范）的一个子集，并使用完全独立于编程语言的文本格式来存储和表示数据。简洁明了的层次结构使 JSON 成为一种理想的数据交换语言。人易读易写，机器易解析生成，有效提高网络传输效率。
5. XML()，中文名称为 ，是标准通用标记语言的一个子集，是一种用于标记电子文件，使其结构化的标记语言。
在电子计算机中，标记是指计算机能够理解的信息符号。通过这种标记，计算机可以处理各种信息，如文章等。它可以用来标记数据和定义数据类型。它是一种源语言，允许用户定义自己的标记语言。它非常适合万维网传输，提供了一种独立于应用程序或供应商的统一方法来描述和交换结构化数据。它是环境中跨平台和内容依赖的技术，也是当今处理分布式结构化信息的有效工具。早在1998年，W3C就发布了XML1.0规范，用于简化文档信息的传输。
6、CSS （英文全称：）是一种用于表达HTML或XML等文档样式的计算机语言。CSS不仅可以静态修改网页，还可以使用各种脚本语言动态格式化网页元素。CSS 可以对网页中元素位置的布局进行像素级精确控制，支持几乎所有字体大小样式，并具有编辑网页对象和模型样式的能力。
7、文字脚本语言，是一种动态类型、弱类型、基于原型的语言，具有内置的支持类型。它的解释器称为引擎，它是浏览器的一部分，被广泛用作客户端的脚本语言。它最初用于 HTML 网页，为 HTML 网页添加动态功能。
二、注册微信小程序
在创建自己的微信小程序之前，首先需要注册小程序账号。有以下帐户类型：
具体注册流程可以参考官方简单教程
三、安装工具、创建项目
靠前步：下载安装微信小程序开发者工具，下载路径：
进入下载界面后，根据自己的操作系统选择对应的链接进行下载，下载完成后进行安装。
第二步：安装登录工具
开发者工具安装好后，我们就可以打开了。靠前次打开需要扫码登录微信，如下图。用手机微信扫描后，即可确认登录。
第 3 步：选择项目类型
登录成功后，如果是靠前次使用该工具，会弹出一个选择项目类型的窗口，如下图：
第 4 步：创建项目
成功选择项目类型后，会弹出创建项目的窗口，如下图：
在创建过程中，如果选择的本地文件夹为空文件夹，则会出现“创建云开发快速入门模板”复选框。初学者要了解微信小程序的基本代码结构，请勾选此选项并勾选。选择后，开发者工具会帮我们在开发目录下生成一个简单的demo，如下图：
四、项目代码结构说明及开发4.1、项目代码结构
点击开发者工具上方导航栏中的“编辑器”微信开发者工具创建小程序项目，我们可以看到这个项目已经初始化完成，里面包含了一些简单的代码文件。最关键也是必不可少的就是app.js、app.json、app.wxss。其中，.js后缀为脚本文件，.json后缀为配置文件，.wxss后缀为样式表文件。微信小程序会读取这些文件并生成小程序的实例。
下面我们简单的了解一下这三个文件的作用，方便我们从头开始修改和开发我们自己的微信小程序。
1、app.js 是小程序的脚本代码。我们可以监控和处理小程序的生命周期函数，并在这个文件中声明全局变量。调用框架提供的丰富的API，例如本例中本地数据的同步存储和同步读取。
2、 app.json 是整个小程序的全局配置。在这个文件中，我们可以配置小程序由哪些页面组成，配置小程序的窗口背景颜色，配置导航栏的样式，以及配置默认标题。请注意，不能向此文件添加任何注释。
3、app.wxss 是整个小程序的通用样式表。我们可以直接在页面组件的属性上使用app.wxss中声明的样式规则。
我们注意到示例程序的代码中有两个文件夹，一个是，另一个是，一般样式的文件夹，以及存放所有页面的文件夹。让我们专注于这一点。
4.2、小程序页面文件组成
在这个例子中，我们有七个页面，页面，欢迎页面，它们都在目录中。微信小程序中每个页面的【路径+页面名称】需要写在app.json中，其中的靠前页就是小程序的首页。
每个小程序页面由相同路径下的四个后缀不同的同名文件组成，例如.js、.wxml、.wxss、.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的文件是样式表文件，.wxml后缀的文件是页面结构文件。
.wxml是页面的结构文件：
1 2
在本例中，,, 用于构建页面结构、绑定数据和交互处理功能。
.js是页面的脚本文件。在这个文件中，我们可以监控和处理页面的生命周期函数，获取小程序实例，声明和处理数据，响应页面交互事件。
1 //index.js 2 const app = getApp() 3 4 Page({ 5 data: { 6 avatarUrl: './user-unlogin.png', 7 userInfo: {}, 8 logged: false, 9 takeSession: false, 10 requestResult: '' 11 }, 12 13 onLoad: function() { 14 if (!wx.cloud) { 15 wx.redirectTo({ 16 url: '../chooseLib/chooseLib', 17 }) 18 return 19 } 20 21 // 获取用户信息 22 wx.getSetting({ 23 success: res => { 24 if (res.authSetting['scope.userInfo']) { 25 // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 26 wx.getUserInfo({ 27 success: res => { 28 this.setData({ 29 avatarUrl: res.userInfo.avatarUrl, 30 userInfo: res.userInfo 31 }) 32 } 33 }) 34 } 35 } 36 }) 37 }, 38 39 onGetUserInfo: function(e) { 40 if (!this.logged && e.detail.userInfo) { 41 this.setData({ 42 logged: true, 43 avatarUrl: e.detail.userInfo.avatarUrl, 44 userInfo: e.detail.userInfo 45 }) 46 } 47 }, 48 49 onGetOpenid: function() { 50 // 调用云函数 51 wx.cloud.callFunction({ 52 name: 'login', 53 data: {}, 54 success: res => { 55 console.log('[云函数] [login] user openid: ', res.result.openid) 56 app.globalData.openid = res.result.openid 57 wx.navigateTo({ 58 url: '../userConsole/userConsole', 59 }) 60 }, 61 fail: err => { 62 console.error('[云函数] [login] 调用失败', err) 63 wx.navigateTo({ 64 url: '../deployFunctions/deployFunctions', 65 }) 66 } 67 }) 68 }, 69 70 // 上传图片 71 doUpload: function () { 72 // 选择图片 73 wx.chooseImage({ 74 count: 1, 75 sizeType: ['compressed'], 76 sourceType: ['album', 'camera'], 77 success: function (res) { 78 79 wx.showLoading({ 80 title: '上传中', 81 }) 82 83 const filePath = res.tempFilePaths[0] 84 85 // 上传图片 86 const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0] 87 wx.cloud.uploadFile({ 88 cloudPath, 89 filePath, 90 success: res => { 91 console.log('[上传文件] 成功：', res) 92 93 app.globalData.fileID = res.fileID 94 app.globalData.cloudPath = cloudPath 95 app.globalData.imagePath = filePath 96 97 wx.navigateTo({ 98 url: '../storageConsole/storageConsole' 99 })100 },101 fail: e => {102 console.error('[上传文件] 失败：', e)103 wx.showToast({104 icon: 'none',105 title: '上传失败',106 })107 },108 complete: () => {109 wx.hideLoading()110 }111 })112 113 },114 fail: e => {115 console.error(e)116 }117 })118 },119 120 })
.wxss 是页面的样式表：
1 /**index.wxss**/ 2 3 page { 4 background: #f6f6f6; 5 display: flex; 6 flex-direction: column; 7 justify-content: center; 8 } 9 .userinfo, .uploader, .tunnel { 10 margin-top: 40rpx; 11 height: 140rpx; 12 width: 100%; 13 background: #fff; 14 border: 1px solid rgba(0, 0, 0, 0.1); 15 border-left: none; 16 border-right: none; 17 display: flex; 18 flex-direction: row; 19 align-items: center; 20 transition: all 300ms ease; 21 } 22 23 .userinfo-avatar { 24 width: 100rpx; 25 height: 100rpx; 26 margin: 20rpx; 27 border-radius: 50%; 28 background-size: cover; 29 background-color: white; 30 } 31 32 .userinfo-avatar:after { 33 border: none; 34 } 35 36 .userinfo-nickname { 37 font-size: 32rpx; 38 color: #007aff; 39 background-color: white; 40 background-size: cover; 41 } 42 43 .userinfo-nickname::after { 44 border: none; 45 } 46 47 .uploader, .tunnel { 48 height: auto; 49 padding: 0 0 0 40rpx; 50 flex-direction: column; 51 align-items: flex-start; 52 box-sizing: border-box; 53 } 54 55 .uploader-text, .tunnel-text { 56 width: 100%; 57 line-height: 52px; 58 font-size: 34rpx; 59 color: #007aff; 60 } 61 62 .uploader-container { 63 width: 100%; 64 height: 400rpx; 65 padding: 20rpx 20rpx 20rpx 0; 66 display: flex; 67 align-content: center; 68 justify-content: center; 69 box-sizing: border-box; 70 border-top: 1px solid rgba(0, 0, 0, 0.1); 71 } 72 73 .uploader-image { 74 width: 100%; 75 height: 360rpx; 76 } 77 78 .tunnel { 79 padding: 0 0 0 40rpx; 80 } 81 82 .tunnel-text { 83 position: relative; 84 color: #222; 85 display: flex; 86 flex-direction: row; 87 align-content: center; 88 justify-content: space-between; 89 box-sizing: border-box; 90 border-top: 1px solid rgba(0, 0, 0, 0.1); 91 } 92 93 .tunnel-text:first-child { 94 border-top: none; 95 } 96 97 .tunnel-switch { 98 position: absolute; 99 right: 20rpx;100 top: -2rpx;101 }102 103 .disable {104 color: #888;105 }106 107 .service {108 position: fixed;109 right: 40rpx;110 bottom: 40rpx;111 width: 140rpx;112 height: 140rpx;113 border-radius: 50%;114 background: linear-gradient(#007aff, #0063ce);115 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);116 display: flex;117 align-content: center;118 justify-content: center;119 transition: all 300ms ease;120 }121 122 .service-button {123 position: absolute;124 top: 40rpx;125 }126 127 .service:active {128 box-shadow: none;129 }130 131 .request-text {132 padding: 20rpx 0;133 font-size: 24rpx;134 line-height: 36rpx;135 word-break: break-all;136 }137 .text-title{138 margin-top: 50%;139 }140 .text-title text{141 font-size: 96rpx;142 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;143 }
页面的样式表不是必需的。当有页面样式表时，页面样式表中的样式规则会与app.wxss中的样式规则重叠。如果不指定页面的样式表，也可以直接使用页面结构文件中app.wxss中指定的样式规则。
.json是页面的配置文件：
页面的配置文件不是必须的。当页面有配置文件时，页面上的配置项会覆盖app.json中相同的配置项。如果没有指定页面配置文件，本页面将直接使用app.json中的默认配置。
1 { 2 "pages": [ 3 "pages/index/index", 4 "pages/userConsole/userConsole", 5 "pages/storageConsole/storageConsole", 6 "pages/databaseGuide/databaseGuide", 7 "pages/addFunction/addFunction", 8 "pages/deployFunctions/deployFunctions", 9 "pages/chooseLib/chooseLib"10 ],11 "window": {12 "backgroundColor": "#F6F6F6",13 "backgroundTextStyle": "light",14 "navigationBarBackgroundColor": "#F6F6F6",15 "navigationBarTitleText": "jackson影琪",16 "navigationBarTextStyle": "black"17 }18 }
运行结果如下：
手机预览
点击开发者工具上方菜单栏“预览”，扫码后即可在微信客户端体验。
