- 关于页面的横向滚动条 为什么我的首页会莫名出现横向滚动条?
[图片] 我把scroll-view都注释了 在首页 上下滑动会出现横向滚动条
2020-01-14 - 自定义导航栏之后,状态栏文字颜色问题
现在开启自定义导航栏之后,所有页面都得自定义导航栏,我觉得这有点不合理,建议每个页面可以配置开启或者不开启。 此外最坑的是,自定义导航栏之后,系统状态栏文字只能是白色,不能设置状态栏颜色,如果小程序导航栏是白色背景或者浅色背景的话,状态栏颜色就完全看不见了,不知这是bug还是故意这样?[图片]
2018-05-05 - 微信小程序支付与公众号支付的互通问题
求助,我有一个电商项目,已经实现小程序与公众号平台用户登录互通,现在的问题是: 在小程序平台生成订单,已经跳出支付界面,取消支付,现在在公众号网页登录电商平台,再点击支付时提示“201 商户订单号重复”,觉得应该是没有做到双平台支付数据互通,请问各位大神。怎么解决这个问题!
2019-11-25 - 新富文本组件
mp-html小程序富文本组件 news欢迎加入 QQ 交流群:699734691示例小程序添加获取组件包功能[图片] 功能介绍 支持在多个平台使用 支持丰富的标签(包括 table、video、svg 等) 支持丰富的事件效果(自动预览图片、链接处理等) 支持锚点跳转、长按复制等丰富功能 支持大部分 html 实体 丰富的插件(关键词搜索、内容编辑等) 效率高、容错性强且轻量化使用方法1. npm 方式 在项目根目录下执行 npm install mp-html 开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "mp-html" } } 在需要使用页面的 wxml 文件中添加 <mp-html content="{{html}}" /> 在需要使用页面的 js 文件中添加 Page({ onLoad() { this.setData({ html: 'Hello World!' }) } }) 2. 源码方式 将源码中的代码包(dist/mp-weixin)拷贝到 components 目录下,更名为 mp-html 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "/components/mp-html/index" } } 后续步骤同上 获取github 链接:https://github.com/jin-yufeng/mp-html npm 链接:https://www.npmjs.com/package/mp-html 文档链接:https://jin-yufeng.gitee.io/mp-html
2022-03-04 - 微信小程序如何实现页面传参?
前言 只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递,下面我总结了 4 种页面方法。 路径传递 通过在url后面拼接参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’。 案例:A页面带参数跳转到B页面 A页面跳转代码 [代码]goB(){ wx.navigateTo({ url: '/pages/B/index?id=value', }) }, [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', options.id) } [代码] 上面的案例是字符串参数,但是很多情况下需要传递对象,如下方代码。 [代码]Page({ data: { userInfo:{ name:'cym', age:16 } }, goB(){ wx.navigateTo({ url: '/pages/B/index?id='+this.data.userInfo, }) }, }) [代码] 如果使用上面同样的方式结构,输出的结果是:[object Object] 这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递,再到接收页面通过JSON.parse解析使用。 A页面跳转代码 [代码] goB(){ let userStr = JSON.stringify(this.data.userInfo) wx.navigateTo({ url: '/pages/B/index?id='+userStr, }) } [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', JSON.parse(options.id)) } [代码] 全局变量 通过App全局对象存放全局变量。 app.js代码 [代码]App({ // 存放对象的全局变量 globalData:{}, }) [代码] A页面跳转代码 [代码]// 获取App对象 const app = getApp() Page({ /** * 页面的初始数据 */ data: { userInfo: { name: 'cym', age: 16 } }, goB() { app.globalData.userInfo = this.data.userInfo wx.navigateTo({ url: '/pages/B/index', }) }, }) [代码] B页面接收代码 [代码]// 获取全局对象 const app = getApp() Page({ onLoad: function (options) { console.log(app.globalData.userInfo) } }) [代码] 存放在 App 全局变量里面,可以被多个页面使用,直接从 App 对象获取即可。这个数据是保持在内测中,每次小程序销毁就没有了。 数据缓存 通过存储到数据缓存中。 A页面跳转代码 [代码] goB() { wx.setStorageSync('userInfo', this.data.userInfo) wx.navigateTo({ url: '/pages/B/index', }) } [代码] B页面接收代码 [代码] onLoad: function (options) { let userInfo = wx.getStorageSync('userInfo', this.data.userInfo) console.log(userInfo) } [代码] 存放在数据缓存里面,可以被多个页面使用,直接用 getStorageSync 获取即可。这个数据是保持在数据缓存中,除非清楚数据缓存或者删除小程序否则一直存在。 事件通信 通过事件通信通道。 A页面跳转代码 [代码]goB() { wx.navigateTo({ url: '/pages/B/index', success:(res)=>{ // 发送一个事件 res.eventChannel.emit('toB',{ userInfo: this.data.userInfo }) } }) } [代码] B页面接收代码 [代码]onLoad: function (options) { // 获取所有打开的EventChannel事件 const eventChannel = this.getOpenerEventChannel(); // 监听 index页面定义的 toB 事件 eventChannel.on('toB', (res) => { console.log(res.userInfo) }) } [代码] 总结 大家可以针对具体业务场景来进行选择合适自己的传参方式。
2022-02-19 - 小程序内完美实现吸顶粘附功能(媲美 美团小程序的吸顶效果)如丝滑一般
利用css属性完美解决吸顶粘附效果(ios&android都适用),分享一下心得: tips:不需要调用onPageScroll 方法 去监听滚动距离!!! 1、给吸顶元素添加css属性 position: sticky;2、给元素设置距离顶部吸附的距离 top: 0px; (这个top值你可以根据实际情况动态设置)3、然后完事了啦啦啦啦啦啦啦啦~by the way:附上简单的代码片段------>https://developers.weixin.qq.com/s/pR8QKjmE7igq
2020-04-02 - 关于CSS中 background-image:url('')的问题
在我们的页面CSS中. 我们页面背景图 ground-image:url ('') 这里面我放图片的本地路径 手机端不显示 但是在开发工具内是可以的. 开发工具中效果: [图片] 手机端效果 分2部分 页面预览效果: 1:[图片] 代码呈现: [图片]
2019-04-12 - 微信小程序获取openid的两种方法
第一种:使用云开发 这种比较简单,只需要开通云开发,创建云函数,调用云函数就可获得。 调用云函数 Promise Cloud.callFunction(Object object) 返回一个Promise对象,所以不用考虑异步问题。 callFunction说明 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/functions/Cloud.callFunction.html具体代码如下: 我这里云函数名为helloCloud // helloCloud-index.js 云函数入口函数 exports.main = async (event, context) => { let{ APPID,OPENID}=cloud.getWXContext() return { APPID, OPENID } //------------------------------------------------------ //云函数调用 wx.cloud.callFunction({ name:'helloCloud', data:{ message:'helloCloud', } }).then(res=>{ console.log(res)//res就将appid和openid返回了 //做一些后续操作,不用考虑代码的异步执行问题。 }) 第二种:不使用云开发 这种方式就需要开发者有自己的后台了。 首先需要在微信小程序调用登录开放接口 wx.login() 获取用户登陆凭证code。 wx.login()接口说明 https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html 然后,向自己的服务器发送请求,并将code一起发送过去。 wx.login({ success (res) { if (res.code) { //发起网络请求 wx.request({ url: '自己的服务器请求接口', data: { code: res.code } }) } else { console.log('登录失败!' + res.errMsg) } } }) 接下来,在自己的服务端调用auth.code2Session接口,我这里是用Java后台。 auth.code2Session接口说明 https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html @RequestMapping("/testopenid") public String getUserInfo(@RequestParam(name = "code") String code) throws Exception { System.out.println("code" + code); String url = "https://api.weixin.qq.com/sns/jscode2session"; url += "?appid=xxxxxxxxxxxxx";//自己的appid url += "&secret=xxxxxxxxxxxxxxxxxxx";//自己的appSecret url += "&js_code=" + code; url += "&grant_type=authorization_code"; url += "&connect_redirect=1"; String res = null; CloseableHttpClient httpClient = HttpClientBuilder.create().build(); // DefaultHttpClient(); HttpGet httpget = new HttpGet(url); //GET方式 CloseableHttpResponse response = null; // 配置信息 RequestConfig requestConfig = RequestConfig.custom() // 设置连接超时时间(单位毫秒) .setConnectTimeout(5000) // 设置请求超时时间(单位毫秒) .setConnectionRequestTimeout(5000) // socket读写超时时间(单位毫秒) .setSocketTimeout(5000) // 设置是否允许重定向(默认为true) .setRedirectsEnabled(false).build(); // 将上面的配置信息 运用到这个Get请求里 httpget.setConfig(requestConfig); // 由客户端执行(发送)Get请求 response = httpClient.execute(httpget); // 从响应模型中获取响应实体 HttpEntity responseEntity = response.getEntity(); System.out.println("响应状态为:" + response.getStatusLine()); if (responseEntity != null) { res = EntityUtils.toString(responseEntity); System.out.println("响应内容长度为:" + responseEntity.getContentLength()); System.out.println("响应内容为:" + res); } // 释放资源 if (httpClient != null) { httpClient.close(); } if (response != null) { response.close(); } JSONObject jo = JSON.parseObject(res); String openid = jo.getString("openid"); System.out.println("openid" + openid); return openid; } 部分参考 https://blog.csdn.net/qq_42940875/article/details/82706638?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task 这样就获得openid了。 但是在实际应用场景中,往往需要在界面展示之前获得openid来做一些操作或者什么。 用以上代码会发现,openid后台虽然获取到了,但是小程序端页面刚展示时好像并没有获取到openid,但是之后查看数据能看到openid。 这是因为wx.request()是异步请求。也就是在请求的过程中,小程序的其他工作没有因为请求而停止。 所以,我们需要将请求封装成一个返回Promise对象的函数。 廖雪峰老师讲的Promise使用 https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544 这样就能在请求完做一些后续操作。 代码如下: //封装wx.request() function request(requestMapping, data, requestWay, contentType) { wx.showLoading({ title: '请稍后', }) return new Promise(function(resolve, reject) { console.log('请求中。。。。。') wx.request({ url: '自己的服务器地址' + requestMapping, data: data, header: { 'content-type': contentType // 默认值 }, timeout: 3000, method: requestWay, success(res) { //console.log(res) if (res.data.success == false || res.data.statusCode == 404) { reject(res) } else { resolve(res) } }, fail: (e) => { wx.showToast({ title: '连接失败', icon: 'none' })}, complete: () => { wx.hideLoading() } }) }) } //获取openid function getOpenId(app, that){ return new Promise(function (resolve, reject) { wx.login({ success: function (yes) { // 发送 res.code 到后台换取 openId, sessionKey, unionId var requestMapping = '/testopenid' var data = { code: yes.code } var requestWay = 'GET' var contentType = 'application/json' var p =request(requestMapping, data, requestWay, contentType) p.then(res => { //console.log(res) 做一些后续操作 app.globalData.openId = res.data; resolve(res) }).catch(e => { reject(e) }) }, fail(e) { console.log(e) } }) }) } 这样就解决了因为异步获取不到数据的问题。 技术有限,欢迎交流。 觉得有用请点个赞。
2020-12-05