java语言开发微信小程序(一)

小程序 专栏收录该内容
1 篇文章 0 订阅

出于兴趣,自己用java搞了一次小程序,现在记录下来,就权当笔记吧。当然也希望能给看到这篇文章的同志一些帮助。这篇文章分两部分,这部分先介绍小程序开发的一些基础知识,包括需要做的准备。按照习惯,先贴一个小程序的文档链接,API.小程序

注册小程序

要开发,首先自然需要有一个账号。在浏览器搜索“微信公众平台”,或者直接访问https://mp.weixin.qq.com/,可以看到账号分三类:服务号,订阅号和小程序。前两者这里不多说,直接点击小程序进去注册即可。

配置服务器

小程序本身已经提供了很多接口,可以满足开发者大部分需要。但是如果已经有实现了的服务,那么在小程序里只需要调用服务接口就可以了(甚至可以用已经写好的网页)。如果正好有这方面的需求,那么首先需要在小程序控制台做相关的配置

  1. appid和秘钥

进入菜单 设置——》开发设置
首先在开发者ID可以获取appID和秘钥(AppSecret)。appid是小程序的唯一标识,在开发中需要用到。

  1. 服务器域名

进入菜单 设置——》开发设置
服务器域名做相关的配置。 其中request合法域名就是java的服务接口部署的服务器域名,如果有上传下载文件等特殊的需求,也可以配置相应的服务器。我的小程序用到了引用的web-view,所以还配置了业务域名。如果是在测试环境,可以用ngrok映射一个域名,但是需要注意,微信公众号和小程序的域名都必须用https协议,所以不管是自己生成还是购买,都是必须装SSL证书的

有关生成SSL证书的操作,可以看我另外一篇文章(也是转载别人的),可以点这里

关联设置

设置——》关联设置 可以将小程序和公众号以及开放平台绑定到一起。当然这样做是有意义的,比如公众号支持在菜单里跳转小程序,小程序中也可以跳转进入公众号。最重要的原因是微信的unionid的使用机制,如果要获取用户的unionid,就必须将公众号和小程序绑定到开放平台。这里要说一点我遇到的问题,就是如果用户只用了你的小程序,而没有关注你的公众号,那么还是无法获取到unionid的

协助开发

如果需要一个团队时,那么需要保证成员们有开发的权限,进入小程序首页,点击 用户身份 ,可以添加用户成员,给其赋予相关的权限即可,一般情况下,赋予以下几种应该就可以满足了

开发者工具

微信公众平台官网提供 微信web开发者工具,直接下载安装就可使用。这里可以直接看官方文档安装开发者工具

项目结构

根据这个链接,创建一个简单的小程序,然后就可以看一下项目的构成。具体的细节可以看文档,这里只说几个我个人认为值得注意的点。

  1. project.config.json文件

根据文档说的,这个文件是保存一些个性化的设置,其中 appid 这个属性就是上面提到的appid。根据这个东西,项目完成之后,从开发工具向小程序控制台上传时才会知道项目的身份,即它属于哪个账号。当然了,如果把这个值改一下,那开发人员根本就打不开这个项目。

  1. app.json文件

所有页面都必须写进pages数组,注意不能写后缀。因为开发者没创建一个wxml文件,都会自动生成js,json和wxss文件,所以pages数组中的元素,只需要根据文件名就会找到这四个不同类型的文件。
tabBar对象就是定义的导航菜单,需要把点击导向的页面定义在list数组中。

  1. app.js文件

这个文件有一个globleData对象,里面定义小程序的全局变量,可以在任何页面去使用,比如可能需要在这里定义baseurl,或者用户信息等公共数据。需要注意,如果要使用app.js定义的内容,首先需要在使用的页面获取应用实例 const app = getApp(),然后可以使用例如 app.globleData.全局变量名 的用法。

  • 14
    点赞
  • 0
    评论
  • 66
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

后台技术选型: <ul style="color:#2F2F2F;"> <li> JDK8 </li> <li> MySQL </li> <li> Spring-boot </li> <li> Spring-data-jpa </li> <li> Lombok </li> <li> Freemarker </li> <li> Bootstrap </li> <li> Websocket </li> </ul> 小程序端技术选型 <ul style="color:#2F2F2F;"> <li> 微信小程序 </li> </ul> <div style="text-align:center;color:#2F2F2F;"> <div style="background-color:transparent;"> <div> </div> <div> <img alt="" src="https://upload-images.jianshu.io/upload_images/6273713-928017278f465cbd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp" /> </div> </div> <div style="font-size:14px;color:#969696;"> <br /> </div> </div> 小程序端 <div style="text-align:center;color:#2F2F2F;"> <div style="background-color:transparent;"> <div> </div> <div> <img alt="" src="https://upload-images.jianshu.io/upload_images/6273713-8d6c2b81701d32cd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp" /> </div> </div> <div style="font-size:14px;color:#969696;"> <br /> </div> </div> <ul style="color:#2F2F2F;"> <li> 扫码点餐 </li> <li> 菜品分类显示 </li> <li> 模拟支付 </li> <li> 评论系统 </li> <li> 购物车 </li> </ul> <p> <span><img alt="" src="https://img-bss.csdn.net/201907270119553529.png" /><br /> </span> </p> <p> <span><img alt="" src="https://img-bss.csdn.net/201907270120098756.png" /><br /> </span> </p> <p> <span><img alt="" src="https://img-bss.csdn.net/201907270120405331.png" /><br /> </span> </p> <p> <span><img alt="" src="https://img-bss.csdn.net/201907270120538298.png" /><img alt="" src="https://img-bss.csdn.net/201907270121012487.png" /><br /> </span> </p>
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值