微信小程序如何访问公众号文章


Posted in Javascript onJuly 08, 2019

前言

随着小程序不断的发展,现在个人的小程序也开放了很多功能了,个人小程序直接打开公众号链接。在群里看到的一款小程序,点击可以直接阅读文章了,所以琢磨了一下,写了一些源码。

主要代码:

<web-view src="https://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247485016&idx=1&sn=e5f60600ea30f669264ddcf5db4fb080&chksm=eaef2168dd98a87ead60eed0f24e799c1befbfe95e341231216af72315c33a56839f92e69ef9&token=29762947&lang=zh_CN#rd"></web-view>

为了达到效果,更加具体的demo

效果如下

github地址:https://github.com/wangxiaoting666/weixinlink

微信小程序如何访问公众号文章

weixin.wxml

<navigator url="/pages/search/search" hover-class="changestyle">
 <view class="view-search">
  <input class="input" placeholder-class="input-placeholder" placeholder="输入文章和链接" bindinput="bindSearchInput" />
  <image class="button" src="/images/search.png" bindtap="tapSearch" />
 </view>
</navigator>

<view class="container">
 <view wx:for="{{cardTeams}}" wx:key="{{cardTeam.viewid}}" wx:for-item="cardTeam" class="item" bindtap="bindViewTap">
  <image class="img" src="{{cardTeam.imgsrc}}" mode="scaleToFill"></image>
  <view class="number-wrapper">
   <text class="name">{{cardTeam.name}}</text>
   <view class="count-wrapper">
    <text class="count">{{cardTeam.count}}</text>
   </view>
  </view>
 </view>
</view>

weixin.wxss

.container {
 padding-top: 0;
}

.item {
 width: 100%;
 height: 220rpx;
 position: relative;
 display: flex;
 margin: 10rpx 10rpx;
 border-bottom: 1px solid rgb(197, 199, 199);
}

.item:first-child {
 margin-top: 0;
}

.item .remove {
 width: 60px;
 height: 100%;
 background-color: red;
 position: absolute;
 top: 0;
 right: -60px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.item .number-wrapper {
 height: 100%;
 padding-top: 40rpx;
 flex-direction: column;
 justify-content: space-between;
}

.item .ok {
 width: 60px;
 height: 100%;
 padding-right: 20rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #98f5ff;
}

.item .img {
 width: 150rpx;
 height: 150rpx;
 padding: 20rpx;
}

.number-wrapper .name {
 margin: 10rpx 10rpx 10rpx 10rpx;
 font-size: 39rpx;
 overflow: hidden;
}

.number-wrapper .count-wrapper {
 display: flex;
 align-items: center;
 margin-left: 10rpx;
 font-size: 25rpx;
}

.number-wrapper .count-wrapper .decrease-btn {
 font-size: 30rpx;
}

.number-wrapper .count-wrapper .increase-btn {
 font-size: 30rpx;
}

.number-wrapper .count-wrapper .count {
 margin: 0 1rpx 0 1rpx;
 font-size: 30rpx;
}

.number-wrapper .price-wrapper .people {
 margin-left: 250rpx;
 font-size: 30rpx;
}

/* 搜索框样式 */

.view-search {
 display: flex;
 flex-direction: row;
 height: 70rpx;
 margin: 20rpx;
 padding: 5rpx;
 border: 1px #e4e2e2 solid;
 border-width: thin;
 align-items: center;
}

.input {
 flex: 1;
 height: 60rpx;
}

.input-placeholder {
 color: #999;
}

.button {
 width: 60rpx;
 height: 60rpx;
}

weixin.js

//index.js
//获取应用实例
var app = getApp();
var cardTeams;

Page({
 data: {
  cardTeams: [{
    "viewid": "1",
    "imgsrc": "../../images/win/1.jpg",
    "price": "¥1245",
    "count": "一个40岁老码农的总结,",
    "name": "一个40岁老码农的总结,奋斗",

   }, {
    "viewid": "2",
    "imgsrc": "../../images/win/2.jpg",
    "price": "¥2345",
    "count": "小公司打杂三年,意外拿到",
    "name": "小公司打杂三年,意外拿到美",

   }, {
    "viewid": "3",
    "imgsrc": "../../images/win/3.jpg",
    "price": "¥2345",

    "count": "作为一个有追求的前端程序媛作",
    "name": "作为一个有追求的前端程序媛",

   }, {
    "viewid": "4",
    "imgsrc": "../../images/win/4.jpg",
    "price": "¥2345",
    "count": "女程序媛面试总结:我",
    "name": "女程序媛面试总结:我是这",

   },
   {
    "viewid": "5",
    "imgsrc": "../../images/win/5.jpg",
    "price": "¥2345",
    "count": "前端工作那些年,怎么避?",
    "name": "前端工作那些年,怎么避免",

   }
  ]
 },

 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo({
   url: '../weixinlink/weixinlink'

  })
 },
 onLoad: function() {
  console.log('onLoad:' + app.globalData.domain)

 }

})

文章界面

weixinlink.wxml

<web-view src="https://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247485427&idx=1&sn=ebfb8851c6cbb0d40c93f8ecbda83687&chksm=eaef20c3dd98a9d5a19f5ad195888c603c8c819021bab602d11f9aa757b66475d39d23f664c4&token=1408526571&lang=zh_CN#rd"></web-view>

注意:

小程序要和公众号关联,链接才可以打开。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
JavaScript中的细节分析
Jun 30 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 #Javascript
JavaScript实现的联动菜单特效示例
Jul 08 #Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 #Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 #Javascript
Vue实现拖放排序功能的实例代码
Jul 08 #Javascript
JavaScript中Dom操作实例详解
Jul 08 #Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 #Javascript
You might like
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
php基本函数汇总
2015/07/09 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
react使用CSS实现react动画功能示例
2020/05/18 Javascript
python检测lvs real server状态
2014/01/22 Python
python定时器使用示例分享
2014/02/16 Python
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Python使用爬虫猜密码
2016/02/19 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python word转pdf代码实例
2019/08/16 Python
python中return的返回和执行实例
2019/12/24 Python
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
毕业自我鉴定怎么写
2014/03/25 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
实习工作表现评语
2014/12/31 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android