微信小程序开发全流
来源：
华夏亿人网络有限公司
日期：2022-04-18 18:31:12
点击：5805
属于：技术分享
一、代码处理
最近一大学同窗开了家自习室，需要一个自习室的预约微信小程序，又恰好手上没有什么代码项目在写，本着少一事不如多一事的原则，尝试了第一次的微信小程序开发。白天要上班，只能利用晚上时间编写，反正他也不着急开业，于是前前后后用了大概半个月的时间，故做记录。
刚开始写，确实没什么经验，不知从何下手，每当这时，当然是坚持一个原则，划重点，开源无国界（天下代码一大抄）。当然，不管哪种语言，初学者都是从看会别人的代码开始的。
在这里，我不说明具体的代码，也不分析具体的代码，只大概分析一下，一个自习室预约软件的需求。总的来说，两点，前端微信小程序和后台服务器。
（一）微信小程序（前端显示）
前端显示当然是不可或缺的，如果是不需要与后台进行数据交换的小程序，也就只需要前端显示了。简单记录流程。
翻阅帮助文档，开发小程序的最重要的一个文档，是腾讯官方的《微信开放文档》，里面有非常详细的指南、框架以及各种开发说明。
选择开发工具，基本没得选，开发微信小程序，翻阅微信开放文档可知，基本就是“微信开发者工具”，文档里有传送口，传送你去下载页面，不支持linux系统，具体使用方法，自己探索，或者百度吧。
语言代码基础，微信小程序其实就是网页开发，用的也是js，json，wxml，wxss，对应网页开发的js，xml，css，语言几乎就是一模一样；
申请你的APPID，在小程序官方网站上申请，小程序网站，注册，登录，一套流程不说了。这个APPID是一个非常重要的身份认证信息，是开发者的身份认证ID，标识了这个小程序是谁开发的，很多地方都会用到，怎么获取，网上可以搜到很多教程，此处不表；
导入别人的项目，在微信开发者工具中的“项目”选择“导入项目”，目录选择你的项目位置，appid就是第4点中你申请的APPID。
微信小程序项目的架构
根据文件目录，简单介绍一下，开局几大板斧：
app.js，这个是在进入微信小程序时，小程序启动阶段的运行的内容，里面最具特色的就是onLaunch()，这个函数就是启动函数，如果有什么需要跟着小程序启动运行的函数，都放在这下面。在这里面，会对一些全局变量，全局函数进行定义并赋初值，在后续每个js文档需要调用时，只需要在js开头加一句const app = getApp()，即可通过诸如app.globalData.imgUrl的形式，调用值。
app.json也是一些全局的定义，需要将每一个page页在"pages": []中进行声明，在"window": {}中定义小程序的名称和背景颜色等一些参数，在"tabBar": {}中定义每个tab页的具体属性，另外，常见的定义，比如，如果你需要使用到导航定位，需要在这里定义一个"permission":{}相关的内容。
app.wxss，就是小程序的一些全局的样式定义，我没怎么用到，看个人喜好。
pages文件夹，这个文件夹下，就是小程序中显示的每一页的内容了，一般每一页的内容包含三个部分，即js（实现功能），wxml（实现页面布局），wxss（定义一些具体的样式）。
部分特点说明
微信小程序虽然类似于网页，但也有其特别之处，尤其是几点内容，需要特别说明。
data中定义的变量，可以在js任意位置，通过this.data.变量名，进行调用。
this.setData，这个函数是用来和前台进行数据交互用的，主要时用来往前台传送数据，采用键值对的方式传值，如this.setData({selstartTime: "11:00"}),，selstartTime则是王前台传的key值，“”中的时值。在前台接收通过{{selstartTime}}来取值。
3.onLoad和onShow的区别，onload是页面初次加载时的动作，只运行一次，onshow是每次显示该页面时的动作，有些时候你通过退后按钮等回到该页面，onload就不会运行，onshow会运行。
wx.navigateTo和wx.redirectTo和wx.switchTab的区别，navigateTo可以跳转至除tab页（就是主页左右切换时显示的几个页面）外的页面，跳转时仍保留原页面，不销毁，点击后退还能回到原页面，redirectTo也是跳转到tab页外的页面，但是跳转时，销毁原页面，不保留，点击后退，不能回到原页面，switchTab跳转至tab页。
wx.request，访问后台方式，通过url进行访问。
openID网络标识号的获取，这个是每个访问该小程序的用户的身份标识，每个用户都独一无二，获取这个openID号，需要通过request与后台联动获取。
在微信开发工具中，可以直接上传至微信小程序官网，提交为体验版。
（二）后台服务器（数据交互）
这部分内容，不是所有人都需要了解的，有些并不需要与后台进行数据交互的，不需要关注，如果需要交互的，则需要了解一下。
需要的环境
Apache，这是为了部署网页用的，大家都晓得的，不多说。
Mysql，这个就更熟悉了，非常常见的关系型数据库，存储数据用的，包括微信小程序很多的数据都需要与这个数据库进行操作，进行读写。
代码运行环境，这里语言不限制，常见的就是java和php，因为我借鉴的是人用的php，我只能硬着头皮用php了。
Wampserver，上述三个环境，apache，mysql，php运行环境，看起来非常的繁琐，当然，如果您真的自己去一个一个的搭建环境，那可能会成未你前进路上的绊脚石。于是你会很惊喜的发现一个神器，Wampserver，简单安装，就能三位一体，一步到位。安装完以后，在安装目录下，会出现一个“wamp64”的文件夹（我选择的是64位），将你的php网页，放在该文件夹下的“www”文件夹下，即可。访问“http://localhost/weixin_yuyue/index.php”(weixin_yuyue即www文件夹下，你的工程文件夹的名)，就能访问后台网页了。
navicat，管理mysql数据库的常用软件了，不多说。
特别注意
后台访问网页和后台访问数据库是两回事，不过访问方法都一样都是的，通过http或者https访问后台。区别在于指向不同。
要获取访问用户的openid号，必须访问"https://api.weixin.qq.com/sns/jscode2session";
访问后台数据库的的类似的句式是“”，这一类句式可以看出来，访问的对应的controller是在“C:wamp64wwwweixin_yuyueApplicationApiController”（我的目录，各人有个人的目录，不尽相同）目录下，对应的XXXController.php中的内容。如“http://localhost/weixin_yuyue/index.php/Api/Orders/index”访问的对应的程序内容为UserController.class.php文件中的如下public function index()的函数内容，controller的使用，就这么简单说一下，不多说了。
二、项目部署
（一）Wampserver的设置
Wampserver默认是理想状态的，因此，需要修改Wampserver的配置为可允许外部访问，具体的方法上网可查。
（二）域名的获取
域名是申请获取的，而且需要具备http和https的权限，我在这里图个方便，用了花生壳的内网透传，下载了花生壳5的软件，再花了6+58=64元，搞定了一个永久的https加密域名，就可以使用这个域名了。使用花生壳软件时，有几个注意点。
必须用https或者http的域名，干脆一步到位，https吧，微信小程序访问后台，要求必须时https的协议，http只在调试时可用。
建议固定电脑的ip地址，这个ip是电脑再局域网内的ip地址，比如我的“192.168.1.4”，省的每次重启后，ip变化，又得更改设置，不然花生壳局域网映射不上。
获取了域名以后，原本的“localhost”的地方，就需要用你的域名替代进去，即可。
（三）小程序官方网站上的设置
登录小程序网页，登录后，有几个地方需要注意修改：
“开发”–“开发设置”–“服务器域名”–“request合法域名”，添加你的域名到这里，表示这是一个允许通过的域名，不然你在微信体验版中，只能打开调试模式。或者在微信开发工具中，调试时，勾选“不校验域名XXXX”。
“首页”–“小程序信息”，谨慎填写，很多都有限制修改次数。
小程序上传为体验版后，需要手动在“管理”–“版本管理”–“开发版本”中，设置为允许体验。然后能获取二维码，可以扫码申请体验，开发者通过即可。
本文来源：华夏网络，转载请注明出处！如需要营销型网站建设、商城系统开发、多端小程序开发、多端小程序商城开发、分销系统开发 请联系我们！
扫码加微信
最近一大学同窗开了家自习室，需要一个自习室的预约微信小程序，又恰好手上没有什么代码项目在写，本着少一事不如多一事的原则，尝试了第一次的微信小程序开发。白天要上班，只能利用晚上时间编写，反正他也不着急开业，于是前前后后用了大概半个月的时间，故做记录。
刚开始写，确实没什么经验，不知从何下手，每当这时，当然是坚持一个原则，划重点，开源无国界（天下代码一大抄）。当然，不管哪种语言，初学者都是从看会别人的代码开始的。
在这里，我不说明具体的代码，也不分析具体的代码，只大概分析一下，一个自习室预约软件的需求。总的来说，两点，前端微信小程序和后台服务器。
（一）微信小程序（前端显示）
前端显示当然是不可或缺的，如果是不需要与后台进行数据交换的小程序，也就只需要前端显示了。简单记录流程。
翻阅帮助文档，开发小程序的最重要的一个文档，是腾讯官方的《微信开放文档》，里面有非常详细的指南、框架以及各种开发说明。
选择开发工具，基本没得选，开发微信小程序，翻阅微信开放文档可知，基本就是“微信开发者工具”，文档里有传送口，传送你去下载页面，不支持linux系统，具体使用方法，自己探索，或者百度吧。
语言代码基础，微信小程序其实就是网页开发，用的也是js，json，wxml，wxss，对应网页开发的js，xml，css，语言几乎就是一模一样；
申请你的APPID，在小程序官方网站上申请，小程序网站，注册，登录，一套流程不说了。这个APPID是一个非常重要的身份认证信息，是开发者的身份认证ID，标识了这个小程序是谁开发的，很多地方都会用到，怎么获取，网上可以搜到很多教程，此处不表；
导入别人的项目，在微信开发者工具中的“项目”选择“导入项目”，目录选择你的项目位置，appid就是第4点中你申请的APPID。
微信小程序项目的架构
根据文件目录，简单介绍一下，开局几大板斧：
app.js，这个是在进入微信小程序时，小程序启动阶段的运行的内容，里面最具特色的就是onLaunch()，这个函数就是启动函数，如果有什么需要跟着小程序启动运行的函数，都放在这下面。在这里面，会对一些全局变量，全局函数进行定义并赋初值，在后续每个js文档需要调用时，只需要在js开头加一句const app = getApp()，即可通过诸如app.globalData.imgUrl的形式，调用值。
app.json也是一些全局的定义，需要将每一个page页在"pages": []中进行声明，在"window": {}中定义小程序的名称和背景颜色等一些参数，在"tabBar": {}中定义每个tab页的具体属性，另外，常见的定义，比如，如果你需要使用到导航定位，需要在这里定义一个"permission":{}相关的内容。
app.wxss，就是小程序的一些全局的样式定义，我没怎么用到，看个人喜好。
pages文件夹，这个文件夹下，就是小程序中显示的每一页的内容了，一般每一页的内容包含三个部分，即js（实现功能），wxml（实现页面布局），wxss（定义一些具体的样式）。
部分特点说明
微信小程序虽然类似于网页，但也有其特别之处，尤其是几点内容，需要特别说明。
data中定义的变量，可以在js任意位置，通过this.data.变量名，进行调用。
this.setData，这个函数是用来和前台进行数据交互用的，主要时用来往前台传送数据，采用键值对的方式传值，如this.setData({selstartTime: "11:00"}),，selstartTime则是王前台传的key值，“”中的时值。在前台接收通过{{selstartTime}}来取值。
3.onLoad和onShow的区别，onload是页面初次加载时的动作，只运行一次，onshow是每次显示该页面时的动作，有些时候你通过退后按钮等回到该页面，onload就不会运行，onshow会运行。
wx.navigateTo和wx.redirectTo和wx.switchTab的区别，navigateTo可以跳转至除tab页（就是主页左右切换时显示的几个页面）外的页面，跳转时仍保留原页面，不销毁，点击后退还能回到原页面，redirectTo也是跳转到tab页外的页面，但是跳转时，销毁原页面，不保留，点击后退，不能回到原页面，switchTab跳转至tab页。
wx.request，访问后台方式，通过url进行访问。
openID网络标识号的获取，这个是每个访问该小程序的用户的身份标识，每个用户都独一无二，获取这个openID号，需要通过request与后台联动获取。
在微信开发工具中，可以直接上传至微信小程序官网，提交为体验版。
（二）后台服务器（数据交互）
这部分内容，不是所有人都需要了解的，有些并不需要与后台进行数据交互的，不需要关注，如果需要交互的，则需要了解一下。
需要的环境
Apache，这是为了部署网页用的，大家都晓得的，不多说。
Mysql，这个就更熟悉了，非常常见的关系型数据库，存储数据用的，包括微信小程序很多的数据都需要与这个数据库进行操作，进行读写。
代码运行环境，这里语言不限制，常见的就是java和php，因为我借鉴的是人用的php，我只能硬着头皮用php了。
Wampserver，上述三个环境，apache，mysql，php运行环境，看起来非常的繁琐，当然，如果您真的自己去一个一个的搭建环境，那可能会成未你前进路上的绊脚石。于是你会很惊喜的发现一个神器，Wampserver，简单安装，就能三位一体，一步到位。安装完以后，在安装目录下，会出现一个“wamp64”的文件夹（我选择的是64位），将你的php网页，放在该文件夹下的“www”文件夹下，即可。访问“http://localhost/weixin_yuyue/index.php”(weixin_yuyue即www文件夹下，你的工程文件夹的名)，就能访问后台网页了。
navicat，管理mysql数据库的常用软件了，不多说。
特别注意
后台访问网页和后台访问数据库是两回事，不过访问方法都一样都是的，通过http或者https访问后台。区别在于指向不同。
要获取访问用户的openid号，必须访问"https://api.weixin.qq.com/sns/jscode2session";
访问后台数据库的的类似的句式是“”，这一类句式可以看出来，访问的对应的controller是在“C:wamp64wwwweixin_yuyueApplicationApiController”（我的目录，各人有个人的目录，不尽相同）目录下，对应的XXXController.php中的内容。如“http://localhost/weixin_yuyue/index.php/Api/Orders/index”访问的对应的程序内容为UserController.class.php文件中的如下public function index()的函数内容，controller的使用，就这么简单说一下，不多说了。
二、项目部署
（一）Wampserver的设置
Wampserver默认是理想状态的，因此，需要修改Wampserver的配置为可允许外部访问，具体的方法上网可查。
（二）域名的获取
域名是申请获取的，而且需要具备http和https的权限，我在这里图个方便，用了花生壳的内网透传，下载了花生壳5的软件，再花了6+58=64元，搞定了一个永久的https加密域名，就可以使用这个域名了。使用花生壳软件时，有几个注意点。
必须用https或者http的域名，干脆一步到位，https吧，微信小程序访问后台，要求必须时https的协议，http只在调试时可用。
建议固定电脑的ip地址，这个ip是电脑再局域网内的ip地址，比如我的“192.168.1.4”，省的每次重启后，ip变化，又得更改设置，不然花生壳局域网映射不上。
获取了域名以后，原本的“localhost”的地方，就需要用你的域名替代进去，即可。
（三）小程序官方网站上的设置
登录小程序网页，登录后，有几个地方需要注意修改：
“开发”–“开发设置”–“服务器域名”–“request合法域名”，添加你的域名到这里，表示这是一个允许通过的域名，不然你在微信体验版中，只能打开调试模式。或者在微信开发工具中，调试时，勾选“不校验域名XXXX”。
“首页”–“小程序信息”，谨慎填写，很多都有限制修改次数。
小程序上传为体验版后，需要手动在“管理”–“版本管理”–“开发版本”中，设置为允许体验。然后能获取二维码，可以扫码申请体验，开发者通过即可。
本文来源：华夏网络，转载请注明出处！如需要营销型网站建设、商城系统开发、多端小程序开发、多端小程序商城开发、分销系统开发 请联系我们！
扫码加微信
上一：没有了
