微信小程序开发

最近因为需要帮女朋友实现一个微信小程序，所以去了解了一下小程序的开发。对于微信小程序的开发，之前完全没接触过（但有一些前端开发经验），作为完全的新手，入手资料肯定是 微信小程序开发文档 ，根据这些天的开发过程的经验来看，最好先详细的过一遍官网的文档，大部分的坑是因为没有详细阅读文档，而另一部分坑是因为文档没有写。。。 注：项目架构是：C/S架构，前后端完全分离，前端：微信小程序，后端：springboot 开发过程遇到的坑主要以下几点： 微信登录实现模块 开发文档中， 登陆逻辑 描述的很清楚，首先小程序中调用 wx.login() 获取 微信提供的临时登录凭证code ，然后把code传到开发者服务器（我们的后端服务器），后端再使用申请的专属appid和appsecret、code（刚才前端传过来的code）作为三个入参，调用微信授权url（https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code（APPID即appid，SECRET即appsecret，JSCODE即code，其他的不变）），微信授权中心会返回两个字段：用户唯一标识 OpenID 和 会话密钥 session_key；为了安全

微信小程序开发MAP（地图） https://blog.csdn.net/qq_35844359/article/details/73740001 微信小程序地图开发入门(一) https://blog.csdn.net/sinat_30162391/article/details/60779224 「微信小程序」实现获取当前位置并在地图上显示 https://blog.csdn.net/tycsbs/article/details/52690007 微信小程序模板消息的两种实现方式 https://blog.csdn.net/yaoxunji/article/details/79176710 一个简单的电商网站秒杀程序的实现 https://blog.csdn.net/xiongchen2012/article/details/54292941 电商项目中使用Redis实现秒杀功能 https://blog.csdn.net/weixin_39768635/article/details/78089200 来源： https://www.cnblogs.com/wsybky/p/9224536.html

事件 官网描述 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html 在小程序中存在两种事件，分别是冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 bind事件 bind事件属于冒泡事件 < view bindtap = ' bind1 ' > view1 < view bindtap = ' bind2 ' > view2 </ view > </ view > bind1 : function ( ) { console . log ( "bind1" ) ; } , bind2 : function ( ) { console . log ( "bind2" ) ; } catch事件 catch事件属于非冒泡事件 < view bindtap = ' bind1 ' > view1 < view catchtap = ' bind2 ' > view2 </ view > </ view > 在同一级中，catch事件会比bind事件先被捕捉 事件的参数，事件默认可以传递一个event对象 这个event对象包含了事件的一些信息 我们还可以在页面上传递一些参数，通过

form组件 官方描述 https://developers.weixin.qq.com/miniprogram/dev/component/form.html 下面是一个简单的表单 < form bindsubmit = " formsubmit " bindreset = " formreset " > < input name = " inputValue " placeholder = " 请输入 " > </ input > < button form-type = " submit " > 提交 </ button > < button form-type = " reset " > 重写 </ button > </ form > formsubmit : function ( event ) { console . log ( event ) console . log ( event . detail . value . inputValue ) } , 提交事件触发，可以发现这个是根据input的name属性取的值 表单控件 表单中存在许多控件帮助我们实现多种形式的表单填写。 官方描述 https://developers.weixin.qq.com/miniprogram/dev/component/button.html 下面是简单的示例

网络api downloadFile接口 官方描述 https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html 下面实现了文件的下载和下载过程中部分参数的获取，使用的是downloadFile接口 < view > < button bindtap = " downloadFile " > 下载 </ button > </ view > downloadFile : function ( ) { // 把文件下载到一个临时文件中 const downloadTask = wx . downloadFile ( { url : 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400' ,

音频和录音 官方描述 https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/api-limit.html#录音 https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/api-limit.html#音频播放控制 下面实现了一个简单的ktv的功能 < view > < button bindtap = " record " > 录制5秒音频 </ button > < button bindtap = " playVoice " > 播放录音 </ button > < button bindtap = " pauseVoice " > 暂停音频 </ button > </ view > 其中record、pauseVoice和playVoice函数实现了录音、暂停音频和播放音频的功能，在onReady生命周期函数中我们可以选择需要播放的背景音乐。 // pages/record/record.js var tempFilePath = "" Page ( { /** * 页面的初始数据 */ data : { } , record : function ( ) { console . log ( "录制音频开始" ) //

屏幕 小程序还提供了一些api来操作屏幕的参数，主要是屏幕的亮度 官方描述 https://developers.weixin.qq.com/miniprogram/dev/api/device/screen/wx.setScreenBrightness.html < view > < button bindtap = " screen " > 屏幕亮度 </ button > < button bindtap = " setScreen " > 设置屏幕亮度 </ button > </ view > screen : function ( ) { wx . getScreenBrightness ( { success ( res ) { console . log ( res ) } } ) } , setScreen : function ( ) { wx . setScreenBrightness ( { value : 1 , success ( ) { console . log ( "设置成功" ) } } ) } , 真机调试结果如下 陀螺仪 官方描述 https://developers.weixin.qq.com/miniprogram/dev/api/device/gyroscope/wx.stopGyroscope.html 陀螺仪和加速器有所不同

数据缓存 官方描述 https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html 每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage/wx.setStorageSync 、 wx.getStorage/wx.getStorageSync 、 wx.clearStorage/wx.clearStorageSync ， wx.removeStorage / wx.removeStorageSync 对本地缓存进行读写和清理。 对于这些缓存数据的存在一些策略进行管理 隔离策略 ：同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同小程序之间也无法互相读写数据。 清理策略 ：本地缓存的清理时机跟代码包一样，只有在代码包被清理的时候本地缓存才会被清理。 首先演示的是最简单的存储操作 < input placeholder = " 存储值 " bindinput = " inputVal " > </ input > < button bindtap = " storage " > 存储 </ button > 这里存储需要一个key，注意这个key是不能重复的

获取AccessToken 官方描述 https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html AccessToken功能上类似于web开发中的session < view > < button bindtap = " getAccessToken " > 获取AccessToken </ button > </ view > /** * 获取AccessToken */ getAccessToken : function ( ) { wx . request ( { url : 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + this . appid + '&secret=' + this . secreat , success : function ( res ) { console . log ( res ) myAccessToken = res . data . access_token } } ) } , 获得当前用户信息 官方描述 https://developers.weixin.qq.com/miniprogram/dev/api

微信小程序开发遇到“Console is not defined”错误 故事要从一个阳光明媚的下午说起… 在我愉快地使用Visual Studio Code编写微信小程序时，想在控制台打印数据信息看看，我和平常一样先打了个’c’然后使用的自动填充，闪电般迅速的敲下了这行代码然后转到开发者工具在控制台看信息 就在这个时候！！！！！！！！！！ 控制台给我报错了… 我人当时就蒙了！！！！！！！！！ 我停下手中的所有活儿，盯着这红色的字符串 恩？？控制台还能没有定义了？？ 我再看看的的代码 此时我大脑里迅速闪过千万行代码,飞速旋转 真相只有一个！！！！ 我把console大写了！ 下面请大家细品一下此处正确的console … … … 接着手指继续愉快地在键盘跳起了舞 而阳关也依旧明媚☺ 来源： CSDN 作者： 菜鸟每天飞过 链接： https://blog.csdn.net/F_lan123/article/details/104159089