首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

开发一个微信小程序(2):编写博客园随笔列表

上一篇介绍了如何通过博客园官方api获取随笔列表,本篇来实现把文章展示到小程序中先来看一下最终的效果图片1、调用获取 access_token 接口如果想在小程序中成功调用接口,需要在小程序后台配置服务器域名...app.js中写一个方法,调用接口拿到token,把token存储到内存中,后面想用的时候直接从内存中拿即可打开小程序根目录下的 app.js图片在 onLaunch()下编辑如下代码,主要是调用 api...;在开始前,先创建2个page,一个是随笔列表,一个是随笔详情打开小程序根目录下的 app.json,在 pages 中增加如下2个路径,保存后,会在pages目录下自动创建对应的文件夹:一个article...3、文章详情页完成博客随笔列表页面后,接下来希望点击文章能够跳转到对应的详情页在上一步中,利用标签进行页面导航,在跳转时,设置了要传递的参数图片在文章详情页需要接收传递来的参数打开...="{{query.url}}">结果发现不能显示文章详情后来查了一下,这是微信小程序的限制,个人类型的小程序不能配置外部业务域名,所以也就无法展示外部链接的内容。。。

1.4K93

开发一个微信小程序(3):编写公众号文章列表

本篇讲一下如何把微信公众号中发布的文章移植到小程序中具体展示内容以及列表样式,我参考了订阅号助手中的「历史图文素材」,如下图片所以在小程序中需要实现以下功能:获取已发布的素材;将数据渲染到前端,每条数据包含标题...,先创建2个文件夹 wx_article和 wx_article_detail图片最开始我的想法是通过接口来实时拿到微信公众号的文章,但是经过一番操作发现行不通,原因是:微信不允许直接在小程序中调用微信公众号的接口...(主要是会暴露一些敏感信息,例如AppID)然后我把调用公众号接口相关的功能写到了服务端(用flask即可),本地部署好服务后,尝试在小程序中调用自己定义的接口,结果发现小程序不允许直接调用ip地址,需要配置域名接着我修改本地...,没想到卡在了这里,微信小程序的限制也太多了最后我决定先跳过这里,把公众号文章的数据提取到一个js文件中,然后在小程序中,直接去读这个js文件来获取数据,这样我就不必卡在这里,可以继续进行后面的学习了~...get_wx_article() 方法,它的作用是读取 wx_article_data.js 中的数据并进行处理每次提取10个,上拉页面触底时,加载下一组数据在data中定义了一个参数page,如果page

1.4K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    WordPress博客默认站点地图使用禁用教程分享

    从站点地图中排除特定页面 要从WordPress网站地图中排除特定页面,请应用以下代码技术: // disable specific page function shapeSpace_disable_sitemap_specific_page...这告诉函数不要执行任何操作,除非当前的帖子类型是“页面”。因此,要从其他文章类型中排除文章,请更改page为要定位的任何文章类型的名称。 函数中的第二行检查以确保post__not_in已设置变量。...然后第三行是动作发生的地方。在编写代码时,该代码排除了ID等于2的页面。因此,您可以将该ID更改为要从站点地图中排除的任何页面ID。...要排除多个页面,上述技术将是相同的,但是增加了更多的“排除”行: // disable specific pages function shapeSpace_disable_sitemap_specific_pages...从robots.txt中排除站点地图规则 启用站点地图后,WordPress会自动将以下规则添加到您站点的虚拟动态生成的robots.txt文件中: Sitemap: https://example.com

    64630

    Taro 小程序开发大型实战(一):熟悉的 React,熟悉的 Hooks

    在这一系列教程中,我们将构建一个多端小程序应用——奥特曼俱乐部(Ultraman Club,简称 UltraClub),一个支持多端登录(微信和支付宝)的类似贴吧的小程序。...其中要重点关注的是 pages 数组,列出了所有的页面模块,例如这里的 pages/index/index 就对应 src/pages/index/index.jsx。...按照最佳实践,Taro 项目中一般把页面组件放到 src/pages 目录中,src/pages/index 就是 index 页面组件模块,其中 index.jsx 的代码如下: import Taro...导入成功后,微信开发者工具的界面如下图所示: 在模拟器页面中,看到了我们 index 页面渲染的 Hello world;编辑器能够查看所有代码,不过通常我们用自己习惯的代码编辑器来开发(VSCode.../PostForm' export { PostCard, PostForm } 在 index 页面中接入 PostCard 和 PostForm 最后在 src/pages/index/index.jsx

    2.5K21

    第四个页面:制作电影资讯页面

    如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。...在app.json里配置movies页面以及tabBar: { "pages": [ "pages/welcome/welcome", "pages/posts/post",..."pages/posts/post-detail/post-detail", "pages/movies/movies" // 配置movies页面 ], "window": {.../posts/post", // 跳转的页面 "text": "阅读" // 选项卡的文本内容 }, { "pagePath": "pages...当点击 “更多” 时进入的页面效果图如下: ? 从效果图,可以看到图片、电影名称以及评分都是和电影资讯页面上的布局以及样式是重复的,所以我们还需要把这部分做成第二个template进行复用: ?

    1.5K10

    快速上手Vue Router和组合式API:创建灵活可定制的布局

    ---- Vue Router 是在 Vue.js 单页应用程序中创建路由的事实标准。但是,你是否知道,除了使用它将路由映射到页面组件之外,还可以使用它来组合页面布局?这是一个有趣的建议。...假设我们正在构建一个博客,在该博客中,某些页面可能在主要内容的两侧都有侧边栏: 其他页面只需要在内容旁边放置一个侧边栏,而且主内容前后的位置可以变化。 而其他页面则根本不需要侧边栏。...选项1是为侧边栏创建组件,并根据需要在每个页面中包含它们。.../pages/AboutShow.vue') }, 而相应的页面组件可能是这样的: // *AboutShow.vue 请注意,新的路由器视图具有与我们提供给路由记录的组件属性的键相匹配的名称属性( LeftSidebar 和 RightSidebar ) 最后,这一次页面本身可以完全排除侧边栏

    1.3K10

    微信小程序 从后台接口接收数据并把数据传给要跳转的页面–小程序中页面传值数据不完整(mpvue)

    return 1;   }   let video_data=JSON.stringify(res.data);//将数据对象转为字符串   wx.navigateTo({//这种跳转,     url: ‘/pages...video_data=’+ encodeURIComponent(video_data)   }) }, 接收的页面 onLoad(options) {     // let video_data = ...console.log(decodeURIComponent(options.video_data))   }, 此时可以传过去了,但会有个新问题,就是参数传递不完整,别截断了 解决办法: 解决办法:在传递过去的页面使用...再在接收的页面中使用decodeURIComponent()方法进行接收。 这样数据就会全部传递过去了。...未经允许不得转载:肥猫博客 » 微信小程序 从后台接口接收数据并把数据传给要跳转的页面–小程序中页面传值数据不完整(mpvue)

    1K20

    微信小程序实战–集阅读与电影于一体的小程序项目(二)

    /posts/post", "pages/posts/post-detail/post-detail" ], "window": { "navigationBarBackgroundColor...那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。...那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。...那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。.../data/posts-data.js') Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载

    63310

    博客世界最受欢迎的30个插件

    翻译于:TOP 30 Wordpress Plugins in Blogosphere, 作者根据Lorelle的Lists of favorite Wordpress plugins上的48列表和280...这样可以让你 blog 文章名字,或者分类的名字在标签(对于 SEO 来说页面上最重要的一个元素)中显示在 blog 名字之前。...它通过缓存 WordPress 的页面并把他们存为静态页面,以后访问将直接读取静态页面而不是通过读取 PHP 代码从数据库读取数据构建页面, WP-Cache 允许每秒就能缓存成百的页面,并且把响应时间从零点几秒到小于毫秒...这个插件让你的读者不用一页一页翻页浏览 blog 的页面,它能够增加一个更好的导航功能,效果如下: Pages (17): [1] 2 3 4 ? … Last ?...Adhesive (5/48) is a plugin that lets you make the posts “sticky”.These posts will remain at the top

    48810

    搭建自己的技术博客系列(六)酷炫主题icarus常用配置整合版,快速搞定博客首页

    为了描述方便,在以下说明中,将前者称为站点配置文件, 后者称为主题配置文件。下面我们先来看看站点配置文件的配置修改。...: 2.6.0 # 你的网站图标,可以搜索在线图标制作,并将其放在images文件夹中 favicon: /images/favicon.svg # Additional HTML meta...,可设为你的GitHub主页 follow_link: 'https://github.com/h2pl/' # 个人介绍部件底部图标社交链接...为了描述方便,在以下说明中,将前者称为站点配置文件, 后者称为主题配置文件。下面我们先来看看站点配置文件的配置修改。...,可设为你的GitHub主页 follow_link: 'https://github.com/h2pl/' # 个人介绍部件底部图标社交链接 social_links

    2.6K00

    小程序版博客——整体框架搭建

    本篇主要记录下自己搭建小程序版博客的整体框架过程及自己在搭建过程中学习到点和一些坑。...框架搭建 页面创建及引入组件 下面就正式开始搭建项目,新增项目之后,在pages把对应的页面加好(首页,专题,我的,详情页)。...配置 创建的页面需要串联起来,根据官方文档,需要配置app.json。 app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。...好啦,到这里,小程序的架子基本上有了,通过手机预览感觉也还不错。 数据请求 页面基本上有点样子了,接着需要实现下数据交互了。...小结 搭建过程中主要熟悉下小程序的API以及有赞UI库的使用,相关细节可以参考对应的文档,还是比较详细的。 由于目前博客小程序还在开发中,后期等上线后源码会分享出来。

    92130

    WordPress 技巧:后台页面编辑页面排除指定页面

    有时候给客户做模板经常会使用一些插件,比如theme my login插件,插件会自动生成一些默认页面来显示指定内容,而这些页面我们是不想让用户看到并编辑的来避免由于客户的更改导致页面内容出错。...所以我们需要在 后台 > 页面 > 所有页面 选项卡里的页面列表排除指定的页面不让用户操作到,具体实现代码如下(直接把代码插入到主题文件夹下functions.php里就可以了): add_action...( 'pre_get_posts' ,'wpjam_exclude_pages' ); function wpjam_exclude_pages( $query ) {         if( !...= get_query_var('post_type') ) )                 $query->set( 'post__not_in', array(23,28,30) ); // 排除掉的页面

    80230

    Taro 小程序开发大型实战(二):多页面跳转和 Taro UI 组件库

    在这一篇文章中,我们将用 Taro 自带的路由功能实现多页面跳转,并用 Taro UI 组件库升级之前略显简陋的界面。...为了方便管理,我们需要引入一个新的 prop(isList),用于判断此组件是显示在首页列表中,还是在帖子详情页面中。...具体而言,在 Taro 中实现页面跳转只需两个步骤: 在入口文件(src/app.jsx)中在 App 组件的 config 中配置之前提到的 pages 属性 在任意组件中通过 Taro.navigateTo...实现“帖子详情”页面 在 src/pages 中创建 post 目录,然后在其中创建 post.jsx 和 post.scss,分别为页面模块和样式文件。...而 Taro 也提供了 Taro UI[5] 组件库,为我们提供了能够适应多端的成熟组件。在这一步中,我们将用 Taro UI 升级界面,让它看上去更像一个成熟的小程序。

    3.1K20

    优雅设计之美:实现Vue应用程序的时尚布局

    前言 页面布局是减少代码重复和创建可维护且具有专业外观的应用程序的基本模式。如果使用的是Nuxt,则可以提供开箱即用的优雅解决方案。然而,令人遗憾的是,在Vue中,这些问题并未得到官方文档的解决。...对页面的更改不应影响其他页面。 如果布局的某些部分在页面中是通用的,则只应声明一次。 设置Vue路由 小编需要在页面之间导航,这就是小编要设置 vue-router 的原因。...三列布局 主页是每个流行的社交网络使用的典型 3 列布局。第一列包含应用程序的徽标和导航,在使用此布局的每个页面中保持不变。这同样适用于右下角的页脚。每个页面的主要内容和侧边栏小部件都会更改。...默认插槽具有标题和文章列表,它们是页面的主要内容。此外,小编创建一个名称为aside 的命名槽,用于声明小部件。...使用下面的代码创建文章页面,并在侧边栏上有一个额外的小部件: import ThreeColumnLayout from "..

    34780

    「译」创建一个Hexo主题-Part2:其他页面

    原文地址:Create an Hexo Theme-Part2: Other Pages 原文作者:Jonathan Klughertz 译者:Chor 在这个系列教程中,你将学习怎么从零开始制作一个...在 part1 中,我们已经着手动工并创建了首页。在这篇文章中,我们将运用所学完成剩余的页面。...其它文章的链接: 创建一个Hexo主题-Part1:首页 创建一个Hexo主题-Part2:其他页面 创建一个Hexo主题-Part3:评论、分析和小部件 文章详情页 让我们继续完成 part1 中的剩余工作并创建文章详情页...文章标签 文章标签部分将生成一篇文章对应的所有标签:layout/_partial/article-tags.ejs 我们想要创建的是一系列的标签和链接,每个链接都将导向对应的标签页面,而标签页面会显示该标签的所有文章...我强烈推荐你根据自己的口味尝试修改主题。 在第三篇文章中,我们将添加评论部分、统计部分、装饰部件并做一些改进。期待与你再次相见! 目前可以找到的比较完备的 Hexo 主题制作教程,我自己从中受益良多。

    75600
    领券