前段时间根据B站上的视频教程，尝试写了一个微信小程序，先放传送门：微信小程序B站学习教程 目前主要实现了3个功能： 在小程序上展示个人微信公众号上的文章； 在小程序上展示个人在博客园上写的文章； 查询每日天气...； 从本篇开始，我会用几篇文章来记录一下整个小程序开发的学习过程，包括其中遇到的问题以及解决问题的过程 如果想在微信小程序中展示公众号或者博客园的文章，首先需要想办法获取文章列表 好在微信公众号或者博客园都提供了相关的...api 一、通过微信公众号api获取素材 微信公众号是有提供官方的api来获取公众号相关内容的，文档链接：微信公众号官方文档 这里我主要用到了其中2个接口：获取Access token和获取素材列表 第...图片 第 2 个接口是获取素材列表 图片 二、通过博客园官方api获取随笔 除了希望可以在小程序中访问公众号上的文章外，也希望可以在小程序上查看博客园中的文章，这样就可以很方便的在手机上浏览博客了..."字段，它的值为"Bearer"， 所以我们在添加token参数时，要按如下写入token 图片 这样就通过api获取到相关的文章列表了～
今日学习目标：vertical属性、文章列表 创作者：颜颜yan_ ✨个人主页：颜颜yan_的个人主页 ⏰预计时间：25分钟 专栏系列：我的第一个微信小程序 ---- 文章目录 前言...vertical属性——Boolean值的"陷阱" 文章列表 效果图 wxml wxss 总结 ---- 前言 哈喽大家好，本期是微信小程序专栏第八期，本期的主要内容是以vertical属性为例了解Boolean...值的一个小“陷阱”、文章列表的制作。...文章列表 效果图 文章列表包括日期、发布时间、文章标题、图片、收藏、浏览、评论几个部分。 wxml 思路： 添加一个大的view组件放内容。...设置整个文章列表，主轴设置为自上而下，调整间距，设置上下边框的颜色。 设置文章和日期的样式，flex布局，主轴从左向右，让日期位于图片的右边。 设置文章简介、文章标题、文章图片的样式。
小程序list数据带值跳转，一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识。...如下图所示： image.png 解析出来的结果如下图： image.png 我们看到它在元素上绑定了一个checkSchoolLogin事件，触发这个事件时需要获取该元素的id值，我们如何获取呢？...我们先用下面的方法看它点击的时候返回了一些什么数据： image.png 如下图所示，点击之后发现e里面带有这些属性，我们可以看到 currentTarget下面有个id, dataset 下面也有个id,这不正是我们需要获取的数据吗...到了这里，聪明的你肯定知道该怎么获取到值了吧~ image.png 1.通过 e.currentTarget.id 即可获取该元素id。...2.通过e.currentTarget.dataset.id 即可获取你自己设置的data-id里面值。
✅作者简介：CSDN内容合伙人、阿里云专家博主、51CTO专家博主 个人主页：hacker707的csdn博客 系列专栏：微信小程序 个人格言：不断的翻越一座又一座的高山，那样的人生才是我想要的...这一马平川，一眼见底的活，我不想要,我的人生，我自己书写，余生很长，请多关照，我的人生，敬请期待 列表渲染 wx:for 手动指定索引和当前项的变量名 wx:key的使用 结束语 wx:for 通过wx...:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下： ✅hacker.wxml <view wx:for="{{userList}}" wx...{id: 2,name: 'meng'}, {id: 3,name: 'yuan'} ] } }) 运行结果如下： 结束语 以上就是微信小程序之列表渲染...持续更新微信小程序教程，欢迎大家订阅系列专栏微信小程序 你们的支持就是hacker创作的动力
今日学习目标：第十二期——列表渲染wx:for 创作者：颜颜yan_ ✨个人主页：颜颜yan_的个人主页 ⏰预计时间：20分钟 专栏系列：我的第一个微信小程序 ---- 文章目录 前言...效果图 标签 post.js post.wxml post.json 页面的json文件和app.json文件配置的区别 总结 ---- 前言 哈喽大家好，本期是微信小程序专栏第十二期...如果将wx:for-item="item"属性去掉，文章列表依然可以正常显示。...此时，不定义item，但是{{}}内依然有item，这是因为如果不定义数组子元素的变量名，小程序默认子元素的变量名就是item。...-- 文章列表 --> <!
问题描述 大家学习程序设计都知道for循环，而且很多编程都需要用到for循环。...在制作微信小程序特别是列表页面的时候，是否有遇到过列表元素很多或者不确定的情况，如果一个一个的去敲就会有很大的工作量非常的麻烦。那么可不可以用for循环来解决这个问题呢？...微信小程序也一样，大家通常看到的一些列表页面都是由很多的元素组成的，如果一个框框一个框框的去写代码效率就特别低了。但是用小程序中wx：for属性就可以实现对列表的快速渲染了。...结语 在微信小程序中使用for循环对列表进行渲染非常的方便而且很灵活。这次的列表渲染需要理解item和index两个循环控制变量以及wx：for属性。
今天做分享朋友圈，因为小程序内是需要获取openid才能查看，但是微信分享朋友圈有是不支持获取的。...所以需要判断一下场景值，在朋友圈的时候直接显示内容，不提示用户登录 场景值： 代表从何处进入小程序的。代表小程序的入口场景值。...注意： 1》目前仅可以在 App 的 onlaunch 和 onshow 中获取上述场景值 App({ onLaunch: function (options) { console.log...) { console.log("[onShow] 本次场景值:", options.scene) } }) 然后我用起来的时候并不成功，onLaunch没执行，onShow 获取不到...，然后就找到了另一种办法，可以满足需求，直接在你需要的地方使用getLaunchOptionsSync获取： let scenne=wx.getLaunchOptionsSync().scene;
watchHeight() { var query = wx.createSelectorQuery() //.box为指定类名高度 q...
微信小程序粉丝列表效果实现 1.效果图 2.代码实现 index.js 部分 data: { friends: [] }, index.wxml index.json { "usingComponents": {}, "navigationBarTitleText": "粉丝列表
微信小程序 setData 工作原理 小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。...微信小程序 setData 性能 1. setData调用频率 setData接口的调用涉及逻辑层与渲染层间的线程通信，通信过于频繁可能导致处理队列阻塞，界面渲染不及时而导致卡顿，应避免无用的频繁调用
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。...列表渲染 列表渲染官方文档链接 - 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。...{username}} wx;for相当于php中的foreach函数, index相当于php的key, item相当于php中的value php中可以命名key和value, 小程序中也可以自定义名字
微信小程序信息展示列表 效果展示 wxml 阅读文章...; justify-content: center; } .line { border: 1px solid #ccc; opacity: 0.3; } js //index.js //获取应用实例...}) }, 2000) }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { }, // 获取用户...独立思考的能力；主动并且善于沟通 简书博客： 达叔小生 https://www.jianshu.com/u/c785ece603d1 结语 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注 小礼物走一走
工具 CE工具 链接：https://pan.baidu.com/s/1UtwbhH9207ST7On1ft-fbw 提取码：psvm 步骤 首选选择微信 选择搜索类型为字符串 输入要搜索的用户微信号进行搜索...如图所示 然后切换用户 输入其他用户微信号，点击再次扫描 多试几遍，最终我这列表中只有3个可选地址 Ctrl+G 搜索内存地址
本篇讲一下如何把微信公众号中发布的文章移植到小程序中具体展示内容以及列表样式，我参考了订阅号助手中的「历史图文素材」，如下图片所以在小程序中需要实现以下功能：获取已发布的素材；将数据渲染到前端，每条数据包含标题...、概要、图片(这些字段接口都有返回)；调整列表样式；点击文章跳转至详情；1、获取已发布的素材在之前一篇文章中介绍了如果通过接口获取公众号素材，传送门：开发一个微信小程序(1)：获取文章列表打开根目录下app.json...，先创建2个文件夹 wx_article和 wx_article_detail图片最开始我的想法是通过接口来实时拿到微信公众号的文章，但是经过一番操作发现行不通，原因是：微信不允许直接在小程序中调用微信公众号的接口...，没想到卡在了这里，微信小程序的限制也太多了最后我决定先跳过这里，把公众号文章的数据提取到一个js文件中，然后在小程序中，直接去读这个js文件来获取数据，这样我就不必卡在这里，可以继续进行后面的学习了～...url后，可以使用标签来展示详情前提是要把公众号与小程序进行关联，打开微信公众平台，找到如下位置进行关联即可图片对应代码如下/pages/wx_article_detail/wx_article_detail.js
wx.getUserInfo({ success: function(p) { co...
在input里面设置focus 左边的是input没有获取焦点事件，也没有键盘弹出。...// 搜索框状态 inputShowed: false, 右边的是input获取焦点事件，默认有键盘弹出。
UnionID机制说明 unionid来区分用户的唯一性，在相同微信开放平台帐号下的移动应用、网站应用、小程序、公众号，用户的unionid是唯一的。...OpenID机制说明 OpenId是用来区分应用的唯一性，在相同微信开放平台账号下不用的应用，其unionid相同，OpenId而不同，比如说同一个微信开放平台绑定了多个小程序应用，每个应用的OpenId...获取unionid需要先在微信开放平台绑定小程序，否则无法获取 UnionID获取两种实现方式： ① 通过小程序接口wx.getUserInfo，从解密数据中获取 UnionID。 ? ?...php /** * 对微信小程序用户加密数据的解密示例代码....至此，微信小程序unionid与openid都已成功获取，大家在开发中特别注意要绑定微信开放平台。
在微信小程序中，如果想获取用户的昵称等信息可以不用另外写后台，如果需要获取用户的unionId，则需要后台来提供获取sessionKey和解码encryptedData。...获取unionid 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。...需要注意的一点是如果要获取unionid，则需要将小程序关联到微信开放平台，同时是已经认证过的账号。 登录流程时序 ?...说明： 小程序调用wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。 开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。...接下来先看小程序端的代码执行 app.js onLaunch: function () { var self = this; // 登录 wx.login({ success
微信小程序开发–获取位置信息 1 获取当前地理位置，首先要拿到用户的授权wx.openSetting 在用户首次进入某页面（需要地理位置授权）时候，在页面进行onLoad，onShow时候，进行调用...wx.getLocation的API } else { //调用wx.getLocation的API } } }) 2、微信小程序地图展示位置信息...在拿到用户授权以后，使用微信的API获取当前位置的经纬度微信获取位置API onLoad: function () { wx.getLocation({ success:...}) // console.log(app.globalData.location); }, }) } 实现效果如下图： 微信小程序也支持在地图上选点...，获取定位信息（wx.chooseLocation）和使用微信内置地图查看位置（wx.openLocation） 3、结合百度地图获取位置信息 微信小程序的接口，只能得到经纬度，但有时候我们需要得到具体的城市或者区域信息
首先我要提供几个文档的链接地址： 首先是官方文档的获取用户位置的API文档地址： 然后本人根据官方文档的介绍直接去页面编写了一个按钮，并且监听了这个按钮的点击事件，在事件方法当中调用了微信提供的获取用户位置的...--index.wxml--> 获取用户位置 // index.js Page({ getUserLocation
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
