小程序开发: 踩坑笔记

1. UnionID取不到的原因

原因1: 小程序没有关联绑定微信开放平台
原因2: 同一个微信开放平台下的相同主体的 App、公众号、小程序,如果用户已经关注公众号,或者曾经登录过App或公众号,则用户打开小程序时,开发者可以直接通过 wx.login 获取到该用户UnionID,无须用户再次授权。(解读:用户如果没有登录过app,也没有登录过公众号,也没有关注过公众号的情况下,小程序中通过 wx.login 是获取不到 unionid的, 此时需要通过对wx.getUserInfo回调过来的加密数据发送至后台进行解密从而得到用户UnionID). 官方文档: wx.getUserInfo()用法

2. http无状态协议, 每次请求都是一个新的session会话

 后台使用shiro框架时发现: 小程序调用登录接口, 后台shiro确实也登录成功了, 但是之后访问其他接口还是被shiro拦截提示没有登录!
原因: 小程序的每次请求都是一个新的会话, 所以后台shiro中subject主体的sessionId也不一致, 故认为没有登录;
解决: 在登录接口成功时将shiro创建的sessionId返回给前端小程序, 保存在storage中, 在下次发送request请求时加上请求头: Cookie:此sessionId, 代码如下:

// 调用登录接口,返回{'status': 'success', 'sessionId':'SHAREJSESSIONID=1d148a01-c69d-4f68-96ea-f4d8b4bb6f53'}, 将sessionId存入缓存或者全局变量中:
 wx.setStorageSync('USER_COOKIE', 'SHAREJSESSIONID=' + json.sessionId);
 // 发送请求时:
 wx.request({
 	url: 'xxxx',
 	data: {},
 	method: 'GET',
	header: {
      'clientType': 'wxLittleApps',
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
      'Cookie': wx.getStorageSync('USER_COOKIE')
    },
    success: function(json){
    }
})

shiro有关session的部分配置如下:

    <!-- session管理器 -->
	<bean id="sessionManager"
		class="org.apache.shiro.web.session.mgt.DefaultWebSessionManager">
		......
		<!-- URL重写中去掉jsessionId -->
        <property name="sessionIdUrlRewritingEnabled"  value="false"  />		
		<!-- session存储的实现 -->
		<property name="sessionDAO" ref="shiroSessionDao" />
		<!-- sessionIdCookie的实现,用于重写覆盖容器默认的JSESSIONID -->
		<property name="sessionIdCookie" ref="shareSessionCookie" />
	</bean>
	<!-- sessionIdCookie的实现,用于重写覆盖容器默认的JSESSIONID -->
	<bean id="shareSessionCookie" class="org.apache.shiro.web.servlet.SimpleCookie">
		<!-- cookie的name,对应的默认是 JSESSIONID -->
		<constructor-arg name="name" value="SHAREJSESSIONID" />
		<!-- jsessionId的path为 / 用于多个系统共享jsessionId -->
		<property name="path" value="/" />
		<!-- more secure, protects against XSS attacks -->
		<property name="httpOnly" value="true" />
	</bean>
	<!-- session存储的实现 -->
	<bean id="shiroSessionDao"
		class="org.apache.shiro.session.mgt.eis.EnterpriseCacheSessionDAO" />

2. 底部tab导航栏只能使用wx.switchTabl()进行跳转

 使用wx.navigateTo或者wx.redirectTo进行页面跳转, 死活跳不过去, 最后在fail回调中打印看一下, 发现tab栏路径不能使用以上两种方法跳转, 只能使用wx.switchTab();

3. 参数的错误封装导致http请求400

 请求携带的参数在springMVC封装时错误导致. 昨天遇到一个问题: 请求相同的接口, 不带参数的请求可以成功, 而带参数的请求报了400, 究其原因发现参数中有个time参数, 传递的是毫秒值, 而后台springMVC参数封装使用Date类型, 所以报了400

4.app.json中没有添加页面路径导致404

5.真机测试showToast一闪而过

 设置showToast的duration不生效, 结果发现是因为wx.hideLoading()方法不仅仅把loading框关掉了, 也把showToast提示框给关了, 网上说两者用的同一个框. 解决方法就是把wx.hideLoading()方法放在wx.showToast()之前.

6.发送模板消息通知返回41028form_id不正确,或者过期(不建议阅读, 小程序模板消息机制已重做)

 小程序发送模板消息只能通过两种方式触发: 1.表单提交; 2. 微信支付
今天在使用表单提交触发发送模板消息时, 总是返回41028错误代码, 检查了多遍配置和form_id等参数都没有问题, 为什么发送不了. 后来才知道发送有限制: 谁触发的表单就只能发送给谁…(不人性化,稍后给出解决方案)比如A提交表获取form_id只能推送消息给自己, 不能使用此form_id发送给别的用户(openId). 并且一次表单提交只能发送一条模板消息, 且有效时长为7天, form_id不能重复使用.

后台推送给指定用户或者定时推送消息解决方案:

① 改造用户经常访问的小程序页面的点击或者跳转事件为form, 保存form_id和openId至数据库, 每次发消息消耗一条数据库记录;

实现过程中出现的问题:

1.把一navigator按钮改造为表单提交后, 在开发者工具中测试每次都可以获取formId, 但是在真机测试, 有的时候拿得到, 有的时候拿不到. 这是因为: 若submit事件执行时间大于跳转时间, 则submit事件会被跳转事件打断. 解决: 把跳转事件写在submit事件的回调中.

7. access_token的那些坑

问题: 这几天在调试生成二维码, 需要用的access_token, 调用接口返回access_token, 有效时间为7200s, 也就是两个小时. 但是运行一段时间后(完全没有两个小时), 二维码就生成不了, 返回的二维码大小也不正常,109字节, 正常大小应该是100kb左右. 右键记事本打开, 发现提示:

{"errcode":40001,"errmsg":"invalid credential, access_token is invalid or not latest hint: [FEWb.A02631091]"}

意思很明了: access_token无效或者不是最新的!
原来access_token生成多次的话, 之前的就算没有到过期时间也会在5分钟后失效, 5分钟后只最新的可用.
但是项目中并没有其他调用获取access_token接口的地方啊, 为什么还会失效?
解决:
 原来是因为! 我们项目两个环境: 测试服和正式服! 使用的是相同的小程序配置(appId和secret). 两个服务器都在调用获取access_token接口!!!A刷新access_token, B五分钟后就失效… B刷新则A5分钟失效!!! 深坑.

8.<view>标签中字符串不换行

后台返回字符串带换行,如下:

1.双手握杠,两腿悬空,双手交替前行,可根据个人情况隔格前行;
2.双手握杠,做引体向上练习;
3.每个运动位仅允许1人同时使用;
4.每个运动位允许最大的使用者重量为120kg,设计的最大训练载荷为160kg。

但是在前端一行展示, 把<view>标签换成<text>后内容自动换行(原样输出)

<think>首先,用户的问题是:“我想获取小红书小程序开发方法 请问小红书小程序开发方法”。这是一个直接的请求,我需要提供小红书小程序开发方法。 根据系统指令: - 所有行内数学表达式必须使用$...$格式。但由于这个问题是关于小程序开发的,可能不涉及数学表达,所以我可以忽略这部分,除非有需要。 - 独立公式必须使用$$...$$格式并单独成段。同样,可能不适用。 - LaTeX语法正确。需要确保任何公式正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识。 用户提供了三个引用: - [^1]: 讨论小红书自研小程序的价值和用途,比如依托流量体系,用于电商体验优化,内容到商品的转换。 - [^2]: 描述在小程序开发者工具中运行uniapp项目:导入项目到HbuilderX,配置manifest.json,运行到小红书小程序模拟器。 - [^3]: 提到开发记录,如onShareChat自定义标题和图片失效的问题,归因于uniapp编译问题。 用户强调:“上述引用仅供参考,并不是用户真正的需求,请尽可能多的参考用户上一次的问题和你的回答。” 但我检查了对话历史: - 这是第一条用户消息在这个对话中。之前的系统指令是设置,但没有用户上一次的问题。用户说“用户上一次的问题”,但在这个context中,这可能是一个错误,因为这是第一条消息。用户可能指的是之前的交互,但在这个模拟中,这是第一次用户输入。 用户消息开头是:“参考站内引用:引用[1]:...引用[2]:...引用[3]:...”。然后说“我想获取小红书小程序开发方法”。 所以,我需要基于这些引用和用户的问题来回答。引用提供了具体信息: - [^1] 概述了小红书小程序的价值和场景。 - [^2] 给出了开发步骤,使用uniapp和HbuilderX。 - [^3] 提到了一个常见问题。 核心是用户要开发方法。我应该提供一个结构清晰的步骤。 开发小红书小程序的方法: 1. **准备环境**:需要安装小红书小程序开发者工具。 2. **选择开发框架**:小红书支持使用uni-app框架开发(根据引用[2])。 3. **开发流程**:导入项目到HbuilderX,配置设置,运行到模拟器。 4. **调试和发布**。 5. **注意事项**:引用[3]提到的问题,需要注意uniapp编译细节。 结构化回答: - 引言:简要介绍小红书小程序开发。 - 开发步骤:一步步指导。 - 常见问题和解决方案:基于引用[3]。 - 生成相关问题。 确保使用中文。 添加引用标识自然地: - 例如,提到小程序价值时,引用[^1]。 - 提及开发工具使用时,引用[^2]。 - 讨论问题时,引用[^3]。 最终回答后,添加相关问题。 大纲: 1. **介绍**:小红书小程序开发概述。 2. **开发方法步骤**: - 安装必备工具(小红书开发者工具、HbuilderX)。 - 创建或导入uni-app项目。 - 配置manifest.json(设置AppID)。 - 运行到小程序模拟器。 - 调试和发布。 3. **常见问题**:分享功能问题等。 4. **生成相关问题**。 生成的相关问题: 1. 如何优化小红书小程序的性能? 2. uni-app开发中的兼容性问题? 3. 小红书小程序的发布流程是什么? </think>### 小红书小程序开发方法 小红书小程序开发主要基于其自研的运行时体系,支持使用跨平台框架如uni-app进行开发,以实现电商体验的快速闭环和高流量转换[^1]。开发过程涉及环境搭建、项目配置、调试和发布等步骤。以下我将一步步引导您完成开发方法,确保结构清晰、易于操作。开发的核心工具包括小红书小程序开发者工具和HbuilderX(用于uni-app项目)。 #### 开发步骤 1. **安装必备工具**: - **小红书小程序开发者工具**: 从小红书官方开发者平台下载并安装(需注册开发者账号)。 - **HbuilderX**: 下载并安装HbuilderX(推荐版本最新版),用于编辑和运行uni-app项目。工具安装完毕后,确保环境变量配置正确[^2]。 2. **创建或导入uni-app项目**: - 在HbuilderX中,新建或导入您的uni-app项目。如果使用现有项目,确保项目结构合规(例如,包含`manifest.json`文件)。 - 在`manifest.json`文件中配置小红书小程序设置: - 添加小红书AppID(需从小红书开发者平台申请)。 - 设置小程序的名称、图标等基础信息[^2]。示例配置片段: ```json "mp-xhs": { "appid": "您的AppID", "setting": { "urlCheck": false } } ``` 3. **运行到小红书模拟器**: - 在HbuilderX中,选择菜单栏的“运行” → “运行到小程序模拟器” → “小红书小程序开发者工具”。 - 首次运行时,系统会提示绑定小红书开发者工具的安装路径(定位到工具的可执行文件目录)。 - 运行成功后,项目将在模拟器中编译并预览。编译输出路径通常为:`unpackage/dist/dev/mp-xhs`,您可以在此目录查看生成的代码[^2]。 4. **调试和优化**: - 使用小红书开发者工具的内置调试器进行实时预览、日志查看和性能分析。 - 常见问题处理: - **分享功能失效问题**: 如引用[3]所述,uni-app编译时可能未将`onShareChat`方法正确放置在Page对象下,导致自定义标题和图片失效。解决方案:手动检查uni-app编译代码,确保事件绑定正确;或使用小红书原生API替代[^3]。 5. **测试与发布**: - 在本地测试通过后,上传代码到小红书开发者平台。 - 提交审核,并根据反馈优化(如处理兼容性问题)。 - 发布上线后,监控用户行为数据,结合小红书内容生态(如笔记、店铺场景)实现流量闭环[^1]。 #### 注意事项 - **开发框架**: 推荐uni-app,因为它支持一次开发、多端部署,但需注意编译细节(如引用[3]的问题)。 - **性能和兼容性**: 小红书小程序依托宿主流量,开发时应优化加载速度和交互体验,避免依赖过重库。 - **资源参考**: 小红书官方文档和社区论坛提供详细指南,建议定期查阅最新更新。 通过以上步骤,您可以高效启动小红书小程序开发,快速实现内容到交易的转化场景[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值