网站推广.NET

网站推广.NET

发现真相:微信小程序开发过程记录

来源:互联网

微信小程序开发过程记录

一、代码处理

最近,一位大学同学在家里开了一个自修室,需要预约一个自修室微信小程序,而手头上没有代码项目。基于少一件事情比一件坏事情多的原则,我尝试了第一个微信小程序开发。我白天必须去上班,而我只能利用晚上的时间进行编译。无论如何,他并不着急开公司,所以前后花了大约半个月的时间,所以我做了记录。

当我第一次开始写作时,我真的没有太多经验。我不知道从哪里开始。当然,这时候,我坚持一个原则,专注于无国界的开源(世界上大量的代码)。当然,无论使用哪种语言,初学者都是从看别人的代码开始的。

在这里,我将不解释特定代码或分析特定代码。我只会分析预约软件自学室的要求。通常,有两点,前端微信小程序和后端服务器。

([一)微信小程序(前端显示)

前端显示当然是必不可少的。如果您不需要与后端小程序交换数据,则只需前端显示。录制过程简单。

在帮助文档中,开发小程序最重要的文档是腾讯官方的“微信开放文档”,其中包含非常详细的指南,框架和各种开发说明。选择开发工具,基本上没有选择,开发微信小程序,浏览微信打开的文档,您可以看到它基本上是“微信开发人员工具”,文档中有一个传输端口,您可以将您发送到下载页面。不支持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也是一些全局定义,您需要在“页面”中声明每个页面:[],在“窗口”:{}中,在“ tabBar”中定义一些参数,例如小程序的名称和背景颜色: {}定义每个标签页的特定属性。另外,例如,如果需要使用导航和定位,则需要使用通用定义,您需要在此处定义与“权限”:{}相关的内容。 app.wxss是小程序的一些全局样式定义,我使用的并不多,这取决于个人喜好。 Pages文件夹,在此文件夹下,是小程序中显示的每个页面的内容。通常,每个页面的内容包含三个部分,分别是js(实现功能),wxml(实现页面布局),wxss(定义某些特定样式)。某些功能的说明

尽管微信小程序与网页相似,但也有其特殊功能,尤其是某些内容,需要特殊说明。

可以通过this.data的变量名称在js中的任何位置调用data中定义的变量。 this.setData,此函数用于与前台进行数据交互,主要用于将数据传输到前台,使用键值对传输值,例如this.setData({selstartTime:“ 11:00”}), ,SelstartTime是Wang前台传递的键值,时间值是“”。通过前台的{{selstartTime}}接收值。

3.onLoad和onShow之间的区别在于,onload是首次加载页面时的操作,并且仅运行一次。 Onshow是每次显示页面时的操作。有时您通过返回按钮返回页面,onload将不运行,onshow将运行。 wx.navigateTo和wx.redirectTo和wx.switchTab,navigateTo可以跳转到除选项卡页面之外的页面(即,当主页从左向右切换时显示的页面),而原始页面是进行跳转时仍保留。单击“向后”也可以返回到原始页面。 redirectTo也跳转到选项卡页面之外的页面,但是在重定向时,原始页面被破坏并且不保留。单击“上一步”无法返回到原始页面,switchTab跳至选项卡页面。 wx.request,访问后台,通过url访问。获取openID网络标识号。这是访问小程序的每个用户的身份。每个用户都是唯一的。要获取此openID号,您需要通过请求和后台链接获取openID号。在微信开发工具中,您可以直接上传到微信小程序官方网站并将其作为试用版提交。 ([二)后台服务器(数据交互)

不是每个人都需要了解这部分内容,有些不需要与后台数据进行交互,不需要关注,如果需要交互,则需要了解。

所需的环境Apache,它用于部署网页,众所周知,下面就不多说了。 Mysql,这是比较熟悉的,非常常见的关系数据库,用于存储数据,其中微信小程序大量数据需要与此数据库一起操作,读写。在代码操作环境中,这里的语言不受限制,常见的是java和php,因为我从人类php学习,所以我只能硬着头皮使用php。 wampserver,以上三个环境,apache,mysql和php操作环境,看起来非常麻烦。当然,如果您真正地逐一设置环境,那么它可能会成为您前进的绊脚石。因此,找到工件Wampserver会很惊喜,只需安装一下它,您就可以一步一步获得Trinity。安装完成后,安装目录中将存在一个“ wamp64”文件夹(我选择了64位)。将您的php网页放在该文件夹下的“ www”文件夹下。访问“”(weixin_yuyue是您在www文件夹下的项目文件夹的名称)以访问后台网页。 Navicat是管理mysql数据库的常用软件,不多说。要特别注意对网页的后台访问和对数据库的后台访问是两个不同的东西,但是访问方法是相同的,可以通过http或https访问后台。不同之处在于不同的方向。要获取访问用户的openid号,您必须访问“”;

public function getOpenId(){ $url="https://api.weixin.qq.com/sns/jscode2session"; $appid='wxddd2d233413fb869';//小程序appid $secret='477fe8909d4ba0ff092bbd636becd45b';//小程序密钥 $js_code=I('js_code'); $sendurl= $url."?app&secret=".$secret."&js_code=".$js_code."&grant_type=".$_GET['grant_type']; $result =json_decode(file_get_contents($sendurl)); $session_key=$result->session_key; $openid=$result->openid; echo json_encode(array("openid"=>$openid,"session_key"=>$session_key)); }

用于访问后端数据库的相似句子模式为“”。可以看到这种句子模式,访问的相应控制器位于“ C:\ wamp64 \ www \ weixin_yuyue \ Application \ Api \ Controller”(我目录下相应XXXController.php的内容,每个人都有一个个人目录,例如,通过“”访问的相应程序内容就是UserController.class.php文件中以下公共函数index()的函数内容。控制器的使用就这么简单,没什么可说的。二、项目部署(一)Wampserver设置

默认情况下,Wampserver是理想的。因此,您需要修改Wampserver的配置以允许外部访问。具体方法可以在线获得。

([二)获得域名

该域名是由应用程序获取的,并且需要http和https权限。为了方便起见,我在这里拍张照片。我用花生壳的内网进行透明传输,下载了花生壳5软件,花了6 + 58 = 64元,得到了一个永久的https加密域名后就可以使用这个域名。使用花生壳软件时要注意几点。

必须使用https或http的域名,只需一步即可获取,https,微信小程序可以访问后台,必要时需要https协议,http仅可用于调试。建议修复计算机的IP地址。此ip是计算机和局域网的ip地址,例如我的“ 192.168.1.4”。每次重新启动后,ip都会更改,并且必须更改设置。 ,否则无法映射花生壳局域网。获取域名后,您需要用域名替换原始的“ localhost”。 ([[K30] 小程序官方网站设置

登录到小程序网页。登录后,有几个地方需要修改:

“开发”-“开发设置”-“服务器域名”-“请求合法域名”,在此处添加您的域名以表明这是允许的域名,否则您将只在微信中试用版。可以打开调试模式。或在微信开发工具中,在调试时选中“不验证域名XXXX”。请仔细填写“首页”-“ 小程序信息”,并且其中许多修改的数量有限。 小程序作为试用版上传后,需要手动设置它以允许在“管理”-“版本管理”-“开发版本”中体验。然后,您可以获得QR代码,可以扫描该代码以申请体验,然后开发人员可以通过它。

最后,两只手都向我提供了我借来的源代码的链接。我不知道这是否违反规则。请先尝试。如果没有,请与我联系将其删除。 微信小程序预订房间的预订代码下载地址