微信小程序开发全流程记录(从前台到后台,到发布)

微信小程序开发全流程记录(从前台到后台,到发布)微信小程序开发流程记录一、代码处理(一)微信小程序(前端显示)微信小程序项目的架构部分特点说明(二)后台服务器(数据交互)需要的环境特别注意二、项目部署(一)Wampserver的设置(二)域名的获取(三)小程序官方网站上的设置一、代码处理最近一大学同窗开了家自习室,需要一个自习室的预约微信小程序,又恰好手上没有什么代码项目在写,本着少一事不如多一事的原则,尝试了第一次的微信小程序开发。白天要上班,只能利用晚上时间编写,反正他也不着急开业,于是前前后后用了大概半个月的时间,故做记录。刚开始写,确实没什

一、代码处理

最近一大学同窗开了家自习室,需要一个自习室的预约微信小程序,又恰好手上没有什么代码项目在写,本着少一事不如多一事的原则,尝试了第一次的微信小程序开发。白天要上班,只能利用晚上时间编写,反正他也不着急开业,于是前前后后用了大概半个月的时间,故做记录。
刚开始写,确实没什么经验,不知从何下手,每当这时,当然是坚持一个原则,划重点,开源无国界(天下代码一大抄)。当然,不管哪种语言,初学者都是从看会别人的代码开始的。
在这里,我不说明具体的代码,也不分析具体的代码,只大概分析一下,一个自习室预约软件的需求。总的来说,两点,前端微信小程序后台服务器

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

前端显示当然是不可或缺的,如果是不需要与后台进行数据交换的小程序,也就只需要前端显示了。简单记录流程。

  1. 翻阅帮助文档,开发小程序的最重要的一个文档,是腾讯官方的《微信开放文档》,里面有非常详细的指南、框架以及各种开发说明。
  2. 选择开发工具,基本没得选,开发微信小程序,翻阅微信开放文档可知,基本就是“微信开发者工具”,文档里有传送口,传送你去下载页面,不支持linux系统,具体使用方法,自己探索,或者百度吧。
  3. 语言代码基础,微信小程序其实就是网页开发,用的也是js,json,wxml,wxss,对应网页开发的js,xml,css,语言几乎就是一模一样;
  4. 申请你的APPID,在小程序官方网站上申请,小程序网站,注册,登录,一套流程不说了。这个APPID是一个非常重要的身份认证信息,是开发者的身份认证ID,标识了这个小程序是谁开发的,很多地方都会用到,怎么获取,网上可以搜到很多教程,此处不表;
  5. 导入别人的项目,在微信开发者工具中的“项目”选择“导入项目”,目录选择你的项目位置,appid就是第4点中你申请的APPID。

微信小程序项目的架构

根据文件目录,简单介绍一下,开局几大板斧:

  1. app.js,这个是在进入微信小程序时,小程序启动阶段的运行的内容,里面最具特色的就是onLaunch(),这个函数就是启动函数,如果有什么需要跟着小程序启动运行的函数,都放在这下面。在这里面,会对一些全局变量,全局函数进行定义并赋初值,在后续每个js文档需要调用时,只需要在js开头加一句const app = getApp(),即可通过诸如app.globalData.imgUrl的形式,调用值。
  2. app.json也是一些全局的定义,需要将每一个page页在"pages": []中进行声明,在"window": {}中定义小程序的名称和背景颜色等一些参数,在"tabBar": {}中定义每个tab页的具体属性,另外,常见的定义,比如,如果你需要使用到导航定位,需要在这里定义一个"permission":{}相关的内容。
  3. app.wxss,就是小程序的一些全局的样式定义,我没怎么用到,看个人喜好。
  4. pages文件夹,这个文件夹下,就是小程序中显示的每一页的内容了,一般每一页的内容包含三个部分,即js(实现功能),wxml(实现页面布局),wxss(定义一些具体的样式)。

部分特点说明

微信小程序虽然类似于网页,但也有其特别之处,尤其是几点内容,需要特别说明。

  1. data中定义的变量,可以在js任意位置,通过this.data.变量名,进行调用。
  2. this.setData,这个函数是用来和前台进行数据交互用的,主要时用来往前台传送数据,采用键值对的方式传值,如this.setData({selstartTime: "11:00"}),,selstartTime则是王前台传的key值,“”中的时值。在前台接收通过{
    {selstartTime}}来取值。
    3.onLoad和onShow的区别,onload是页面初次加载时的动作,只运行一次,onshow是每次显示该页面时的动作,有些时候你通过退后按钮等回到该页面,onload就不会运行,onshow会运行。
  3. wx.navigateTo和wx.redirectTo和wx.switchTab的区别,navigateTo可以跳转至除tab页(就是主页左右切换时显示的几个页面)外的页面,跳转时仍保留原页面,不销毁,点击后退还能回到原页面,redirectTo也是跳转到tab页外的页面,但是跳转时,销毁原页面,不保留,点击后退,不能回到原页面,switchTab跳转至tab页。
  4. wx.request,访问后台方式,通过url进行访问。
  5. openID网络标识号的获取,这个是每个访问该小程序的用户的身份标识,每个用户都独一无二,获取这个openID号,需要通过request与后台联动获取。
  6. 在微信开发工具中,可以直接上传至微信小程序官网,提交为体验版。

(二)后台服务器(数据交互)

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

需要的环境

  1. Apache,这是为了部署网页用的,大家都晓得的,不多说。
  2. Mysql,这个就更熟悉了,非常常见的关系型数据库,存储数据用的,包括微信小程序很多的数据都需要与这个数据库进行操作,进行读写。
  3. 代码运行环境,这里语言不限制,常见的就是java和php,因为我借鉴的是人用的php,我只能硬着头皮用php了。
  4. Wampserver,上述三个环境,apache,mysql,php运行环境,看起来非常的繁琐,当然,如果您真的自己去一个一个的搭建环境,那可能会成未你前进路上的绊脚石。于是你会很惊喜的发现一个神器,Wampserver,简单安装,就能三位一体,一步到位。安装完以后,在安装目录下,会出现一个“wamp64”的文件夹(我选择的是64位),将你的php网页,放在该文件夹下的“www”文件夹下,即可。访问“http://localhost/weixin_yuyue/index.php”(weixin_yuyue即www文件夹下,你的工程文件夹的名),就能访问后台网页了。
  5. navicat,管理mysql数据库的常用软件了,不多说。

特别注意

  1. 后台访问网页和后台访问数据库是两回事,不过访问方法都一样都是的,通过http或者https访问后台。区别在于指向不同。
  2. 要获取访问用户的openid号,必须访问”https://api.weixin.qq.com/sns/jscode2session”;
   public function getOpenId(){ 
   
      $url="https://api.weixin.qq.com/sns/jscode2session";
       $appid='wxddd2d233413fb869';//小程序appid
       $secret='477fe8909d4ba0ff092bbd636becd45b';//小程序密钥
       $js_code=I('js_code');
       $sendurl= $url."?appid=".$appid."&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));
   }
  1. 访问后台数据库的的类似的句式是“”,这一类句式可以看出来,访问的对应的controller是在“C:\wamp64\www\weixin_yuyue\Application\Api\Controller”(我的目录,各人有个人的目录,不尽相同)目录下,对应的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加密域名,就可以使用这个域名了。使用花生壳软件时,有几个注意点。

  1. 必须用https或者http的域名,干脆一步到位,https吧,微信小程序访问后台,要求必须时https的协议,http只在调试时可用。
  2. 建议固定电脑的ip地址,这个ip是电脑再局域网内的ip地址,比如我的“192.168.1.4”,省的每次重启后,ip变化,又得更改设置,不然花生壳局域网映射不上。
  3. 获取了域名以后,原本的“localhost”的地方,就需要用你的域名替代进去,即可。

(三)小程序官方网站上的设置

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

  1. “开发”–“开发设置”–“服务器域名”–“request合法域名”,添加你的域名到这里,表示这是一个允许通过的域名,不然你在微信体验版中,只能打开调试模式。或者在微信开发工具中,调试时,勾选“不校验域名XXXX”。
  2. “首页”–“小程序信息”,谨慎填写,很多都有限制修改次数。
  3. 小程序上传为体验版后,需要手动在“管理”–“版本管理”–“开发版本”中,设置为允许体验。然后能获取二维码,可以扫码申请体验,开发者通过即可。

最后,双手奉上我借鉴的源代码的链接,不知道这样是否违规,先试试吧,如果不可以,请作者联系我删除。微信小程序自习室预约代码下载地址

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/34809.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注