美文网首页
小程序--组件篇

小程序--组件篇

作者: Sharise_Mo佩珊 | 来源:发表于2018-03-15 12:55 被阅读0次

因为不太习惯小程序的写法，过一段时间没有写的话就会忘记，每次都要重新看文档，所以在这里记录下小程序经常会用到的组件，防止脑子短路的时候，什么都乱~

微信开卡组件（会员一键开卡）

小程序文档：文档-API-开放接口-卡券-会员卡组件https://mp.weixin.qq.com/debug/wxadoc/dev/api/card.html#%E4%BC%9A%E5%91%98%E5%8D%A1%E7%BB%84%E4%BB%B6
https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=1479824356&version=1&lang=zh_CN&platform=2
微信详细版本： https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1499332673_Unm7V

image.png image.png
image.png
image.png 
// 在app的onshow中获取参数
App({
onShow(opitons){
  if(options.referrerInfo.appId){}
  if(options.referrerInfo.extraData.url == '/pages/index/index')
}
})

第三方平台发布小程序代码注意点

  • extJson：记录自定义属性【page，APPID】
  • 流程：微信开发者工具提交代码-到开放平台将草稿箱中的一个模板添加到模板-调用第三方平台接口提交代码包-体验版二维码-提交审核-审核通过-发布过审代码

scroll-view

这个组件，有时候脑子清醒的时候很容易就看清楚文档写出来了，但是有时候却迷迷糊糊，越乱越着急，所以在此贴上代码
这里要注意的点：scroll-view 里面设置scroll-x，然后加一个子层view（此view要设置具体的高度/宽度，内容的实际宽度，滑动的区间）

<！-- 横向滚动-->
 <scroll-view scroll-x scroll-with-animation>
    <view style="width:800px">
        <view class="item">4234</view>
        <view class="item">21234</view>
        <view class="item">000</view>
        <view class="item">111</view>
        <view class="item">5555</view>
        <view class="item">7777</view>
        <view class="item">21</view>
        <view class="item">4234</view>
        <view class="item">9999</view>
        <view class="item">888</view>
    </view>
 </scroll-view>
<!-- 纵向滚动 -->
<scroll-view scroll-y scroll-with-animation>
    <view style="height:100px;">
        <view class="item">7777</view>
        <view class="item">21</view>
        <view class="item">4234</view>
        <view class="item">9999</view>
        <view class="item">888</view>
    </view>
</scroll-view>
.item{
    flex: 0 0 auto;  // 自动适应每个元素的宽度
    display: inline-block;
    // width: 150rpx;
    height: 200rpx;
    margin: 20rpx 10rpx;
    border: 1px solid #ccc;
    text-align: center;
}
// 在安卓设备上滑动会出现滚动条，可以给滚动条设置样式，使其隐藏
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

左滑删除

https://juejin.im/post/5be81e1251882516f578628a
注意：ios设备下的z-index无效

swiper 实现跑马灯效果

<!-- 跑马灯 -->
    <view class="list">
        <swiper circular="true" previous-margin="70px" next-margin="70px" skip-hidden-item-layout bindchange="handleSwiper">
            <block wx:for="{{imgUrls}}">
                <swiper-item >
                <image src="{{item}}" class="slide-image {{index == current? 'img-active' : ''}}"/>
                </swiper-item>
            </block>
        </swiper>
    </view>

//js
<script>
Page({
  data: {
    current: 0,
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ]
  },
handleSwiper(e) {
    var i = e.detail.current
    this.setData({
      current: i
    })
  }
})

</script>
//css
<style>
.list{
    margin: 30rpx 0 0;
}
.list swiper{
    width: 100%;
    height: 500rpx;
}
.list swiper-item{
    width: 100%;
    height: 100%;
}
.swiper-item{
    width: 80%;
    overflow: auto;
  }
  .slide-image{
    width: 380rpx;
    height: 380rpx;
    margin: 35rpx auto;
    text-align: center;
  }
  .img-active{
    width: 480rpx;
    height: 500rpx;
    margin-top: -50rpx;
    box-shadow: 0 0 10rpx rgba(0,0,0,0.3);
  }
</style>

复制粘贴

wx.setClipboardData(Object object)

wx.setClipboardData({
  data: 'data',
  success(res) {
    wx.getClipboardData({
      success(res) {
        console.log(res.data) // data
      }
    })
  }
})

小程序显示富文本内容

最近小程序也新增了富文本组件【rich-text】，使用过程中如果图片过大显示不全，可以使用正则表达式做一些适配

<rich-text node="data"></rich-text>
let data = "<p><img src="https://aa.com/aa.png"/></p>";
data = data.replace(/\<img/gi,"<img style='width:100%;height:auto;'");

web-view：在小程序中内嵌网页

<web-view  src="https://baidu.com"></web-view>
image.png

需要先做设置才能在小程序打开网页：小程序公众号后台--开发设置--添加业务域名【同时下载一份文件放到服务器根目录下】

在小程序中使用自定义组件

Component({
    properties: {
        tabActive: String,
        positionSlug: String,
        groupId: Number
    },
    data: {
        device: ''
    },

    ready() {
        let _this = this
        wx.getSystemInfo({
            success(res) {
                console.log(res.model)
                if (res.model.indexOf('iPhone X') != -1) {
                    _this.setData({
                        device: 'iphoneX'
                    })
                }
            }
        })
    }
})
  • 使用组件：在需要引用组件的index.json中添加 usingComponents
    "usingComponents": {
        "navigation-tab": "/pages/components/navigationTab/index"
    }

适应iphone X 底部一栏抬高

// indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
      let _this = this
      wx.getSystemInfo({
            success(res) {
                console.log(res.model)
                if (res.model.indexOf('iPhone X') != -1) {
                    _this.setData({
                        device: 'iphoneX'
                    })
                }
            }
        })

PHP生成小程序码

  /**
     * 生成小程序码
     */
    public function getGoodsMinaCode(Request $request){
        $goods_id = $request->goods_id;
        $goods_sn = $request->goods_sn;
        $this->openPlatform = \EasyWeChat::openPlatform();

        $app = WeChatAuth::query()->where([
            'business_no' => $this->business_no,
            'auth_type'   => 3,
        ])->select('app_id', 'refresh_token')->first();

        $app =  $this->openPlatform->miniProgram($app['app_id'], $app['refresh_token']);
        $response = $app->app_code->get('pages/index/details/index?id=' . $goods_id, []);
//        $response = $app->app_code->getUnlimit('scene-value', [
////            'path' => 'pages/point/gift-record/index'
//            'path' => 'pages/index/details/index?id='.$goods_id
//
//        ]);

        if ($response instanceof \EasyWeChat\Kernel\Http\StreamResponse) {
            $filename = $response->saveAs(public_path('frontend/weChatMall/goodsMinaCode/'.$this->business_no), $goods_sn.'.png');
            $path = 'https://crm.pinkr.com/frontend/weChatMall/goodsMinaCode/'.$this->business_no.'/'.$filename;
            return $this->returnJsonMsg(200,['url'=>$path]);
        }
    }

小程序热启动与冷启动

image.png

更新新版本：wx.getUpdateManager API

  • 小程序发布一个新版本之后，让用户自己的小程序也更新到最新版本
  • 小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上，如果需要马上应用最新版本，可以使用wx.getUpdateManager API 进行处理

热启动：
用户已经打开过某小程序，在一定时间内（5min）再次打开
此时无需重新启动，只需要将后台态的小程序切换到前台

冷启动：
用户首次打开 / 小程序被微信主动销毁后 再次打开，
此时小程序需要重新加载启动

重启：
小程序没有重启的概念，
当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5min）会被微信主动销毁
当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁
一、运行机制

小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。
假如用户已经打开过某小程序，然后在一定时间内（五分钟）再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；
冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

小程序没有重启的概念
当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁
当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁
二、更新机制

小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本，可以使用 wx.getUpdateManager API 进行处理。

小程序分包

分包是为了优化首次加载小程序包的速度，后面按需加载

// 在app.json中，在pages[] 后面，加上subpackages， 
// root 是分包的根目录，name是分包名称
"subpackages": [{
            "root": "pages/livePlayer",
            "name": "livePlayer",
            "pages": [
                "list/index"
            ],
            "plugins": {
                "live-player-plugin": {
                    "version": "1.0.4",
                    "provider": "wx2b03c6e691cd7370"
                }
            }
        }

图片懒加载

小程序官方有个懒加载，只需要在image标签加上lazy-load="true"即可
注意，swiper中不能用懒加载，只能在列表中用

    <image src="{{item.img}}" mode="widthFix" class="min-img" lazy-load="true"></image>

骨架屏

https://github.com/jayZOU/skeleton
小程序中引入骨架屏组件，然后判断是否显示，给元素并设置类名：.skeleton-rect / .skeleton-radius

自定义组件

生命周期
created: function(){}, // 组件在内存中创建完毕执行
attached: function(){}, // 组件挂载之前执行
ready: function() {}, // 组件挂载后执行
detached: function(){}, // 组件移除执行
moved: function(){}, // 组件移动的时候执行

小程序官网中并没有明确地说明组件的生命周期，通过查阅资料，内容大致如下:

  • created 组件实例化，但节点树还未导入，因此这时不能用setData
  • attached 节点树完成，可以用setData渲染节点，但无法操作节点
  • ready(不是onReady) 组件布局完成，这时可以获取节点信息，也可以操作节点
  • moved 组件实例被移动到树的另一个位置
  • detached 组件实例从节点树中移除

组件所在页面的生命周期

pageLifeTimes: {
  show(){},
  hide(){}
}
image.png

小程序所在页面的生命周期


image.png

相关文章

  • 小程序好文集合

    组件篇 微信小程序：组件实践 整体梳理 微信小程序开发深入解读

  • 小程序--组件篇

    因为不太习惯小程序的写法，过一段时间没有写的话就会忘记，每次都要重新看文档，所以在这里记录下小程序经常会用到的组件...

  • 微信小程序开发之组件

    第60篇 极客时间《9小时搞定微信小程序开发》第四课：原生组件。 学习之前，先了解了小程序的组件与现有HTML组件...

  • 小程序（十四）小程序自定义弹窗组件

    上一篇中说的是小程序自带的弹窗组件，今天，我们来试试小程序的自定义组件，我们自定义一个带确定取消的弹窗组件。 首先...

  • 小程序篇-tab组件

    如何编写小程序的tab组件？ 小讨论：我们都知道小程序可以用template编写一些模版，后来小程序又可以实现与v...

  • 微信小程序(六)表单组件

    小程序表单组件 了解小程序表单组件 明确不同表单组件的使用方法 (1)button

  • 微信小程序直播如何接入？开源代码接入案例分享

    小程序直播组件接入指引 一、简介 小程序直播，是微信提供给小程序开发者的直播组件。通过调用该组件，商家可以在小程序...

  • 干货博客集

    基础 webpack4.x 入门一篇足矣 react组件通信方式汇总 vue组件之间的通信 原生小程序组件通信 w...

  • 微信小程序-canvas压缩图片使用入门

    微信小程序canvas组件官方文档 微信小程序canvas组件官方文档canvas API canvas组件介绍 ...

  • 微信小程序(四)视图组件

    小程序组件 视图容器 (一) 视图容器 了解小程序组件中的视图容器 明确小程序组件中的视图容器的用途和方法 了解不...

网友评论

      本文标题：小程序--组件篇

      本文链接：https://www.haomeiwen.com/subject/qhqhqftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|小程序--组件篇|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！