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


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 相关文章推荐
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
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中正确的使用json
2013/08/06 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
.net面试题
2015/12/22 面试题
新闻专业个人自我评价
2013/09/21 职场文书
工作中的自我评价如何写好
2013/10/28 职场文书
30年同学聚会感言
2014/01/30 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
鼋头渚导游词
2015/02/05 职场文书
体育教师个人总结
2015/02/09 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python