1.

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

2.

主要代码：

web-viewsrc"https://mp.weixin.qq.com/s?__bizMzI2ODUxMzg4Nwmid2247485016idx1sne5f60600ea30f669264ddcf5db4fb080chksmeaef2168dd98a87ead60eed0f24e799c1befbfe95e341231216af72315c33a56839f92e69ef9token29762947langzh_CN#rd"/web-view3.

为了达到效果，更加具体的demo效果如下github地址：https://github.com/wangxiaoting666/weixinlink

4.

weixin.wxml

navigatorurl"/pages/search/search"hover-class"changestyle"viewclass"view-search"inputclass"input"placeholder-class"input-placeholder"placeholder"输入文章和链接"bindinput"bindSearchInput"/imageclass"button"src"/images/search.png"bindtap"tapSearch"//view/navigatorviewclass"container"viewwx:for"{{cardTeams}}"wx:key"{{cardTeam.viewid}}"wx:for-item"cardTeam"class"item"bindtap"bindViewTap"imageclass"img"src"{{cardTeam.img src}}"mode"scaleToFill"/imageviewclass"number-wrapper"textclass"name"{{cardTeam.name}}/textviewclass"count-wrapper"textclass"count"{{cardTeam.count}}/text/view/view/view/view5.

weixin.wxss

.container{padding-top:0;}.item{width:100%;height:220rpx;position:relative;display:flex;margin:10rpx10rpx;border-bottom:1pxsolidrgb(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:10rpx10rpx10rpx10rpx;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:01rpx01rpx;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#e4e2e2solid;border-width:thin;align-items:center;}.input{flex:1;height:60rpx;}.input-placeholder{color:#999;}.button{width:60rpx;height:60rpx;}6.

weixin.js

//index.js//获取应用实例varappgetApp();varcardTeams;Page({data:{cardTeams:[{"viewid":"1","img src":"../../images/win/1.jpg","price":"¥1245","count":"一个40岁老码农的总结，","name":"一个40岁老码农的总结，奋斗",},{"viewid":"2","img src":"../../images/win/2.jpg","price":"¥2345","count":"小公司打杂三年，意外拿到","name":"小公司打杂三年，意外拿到美",},{"viewid":"3","img src":"../../images/win/3.jpg","price":"¥2345","count":"作为一个有追求的前端程序媛作","name":"作为一个有追求的前端程序媛",},{"viewid":"4","img src":"../../images/win/4.jpg","price":"¥2345","count":"女程序媛面试总结：我","name":"女程序媛面试总结：我是这",},{"viewid":"5","img src":"../../images/win/5.jpg","price":"¥2345","count":"前端工作那些年，怎么避？","name":"前端工作那些年，怎么避免",}]},//事件处理函数bindViewTap:function(){wx.navigateTo({url:'../weixinlink/weixinlink'})},onLoad:function(){console.log('onLoad:'+app.globalData.domain)}})7.

文章界面weixinlink.wxml

web-viewsrc"https://mp.weixin.qq.com/s?__bizMzI2ODUxMzg4Nwmid2247485427idx1snebfb8851c6cbb0d40c93f8ecbda83687chksmeaef20c3dd98a9d5a19f5ad195888c603c8c819021bab602d11f9aa757b66475d39d23f664c4token1408526571langzh_CN#rd"/web-view8.

注意：小程序要和公众号关联，链接才可以打开。

9.

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1