wxml: <view class="box">   <view class="section">     <picker mode="date" value="{{date}}" fields="month" start="2010-01-01" end="{{cy+'-'+cm}}"       bindchange="bindDateChange">       <view class="picker">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>     </picker>   </view>   <view>     <!-- 显示星期 -->     <view class="week color9b">       <view wx:for="{{weeks_ch}}" wx:key="unique">{{item}}</view>     </view>     <view class='days'>       <!-- 行 -->       <view class="rows" wx:for="{{days.length/7}}" wx:for-index="i" wx:key="unique">         <!-- 列 -->         <view class="columns" wx:for="{{7}}" wx:for-index="k" wx:key="unique">           <!-- 每个月份的空的单元格 -->           <view class='cell' wx:if="{{days[7*i+k].date == null}}">             <text decode="{{true}}">&nbsp;&nbsp;</text>           </view>           <!-- 每个月份的有数字的单元格 -->           <view class='cell' wx:else>             <!-- 当前日期已签到 -->             <view wx:if="{{days[7*i+k].isSign == true}}" class='qianbg'>               <text class="colorff">{{days[7*i+k].date}}</text>               <text class="sourse">+{{days[7*i+k].Score}}</text>             </view>             <!-- 当前日期未签到 -->             <view wx:else>               <text>{{days[7*i+k].date}}</text>             </view>           </view>         </view>       </view>     </view>   </view> </view> 简单提下思路，首先默认确定当前年月，cy cm, 初始化：获取days遍历日历的格子，通过获取当前月第一天是星期几来判断前面有几个空格，放入days,再当月天数放入days,然后进行渲染，再通接口去拿签到信息，签到成功的突出显示。这里签到初始化时我默认给了标识isSign，将已签到列表和当前年月日进行比较，符合条件则更新签到状态。切换选择日期，这里我用的是选择器，当然可以写成点击左侧按钮上一月，右侧按钮下一月那种，重新选择日期后，initdata(e) 传入年月，就是当前选择年月的数据。将星期日作为第一日的我也备注上去了。样式根据自己的喜好改就行了，最后看看我写的两个项目效果： [图片][图片] 写了个demo：https://developers.weixin.qq.com/s/SSlwjGmb7Wm9

[图片] wxml: <view  style="--width:{{width}}px;--timer:{{timer}}s;">     <view class="marquee_text" style="font-size:{{size}}px">{{text}}</view> </view> wxss: @keyframes move {   from {   margin-left: 100%;  }   to {   margin-left: var(--width);   /* var接受传入的变量 */  } } .marquee_text{   display: inline-block;   margin-left: 100%;   white-space: nowrap;   animation: move var(--timer)  infinite linear;   font-weight: bold;background: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2025728819,3580500436&fm=26&gp=0.jpg');background-size: contain; -webkit-background-clip: text;color: transparent; } js: Page({   data: {     text: '成都近日新增确诊新冠患者3例，请大家做好防护，外出请戴好口罩！',     size: 14,//宽度即文字大小     moveTimes: 8,//刚好文字宽度等于屏幕宽度所需的时间     width: 0,//文字宽度     timer: 0 //滚动时间   },   onLoad: function () {     var screenW = wx.getSystemInfoSync().windowWidth;//获取屏幕宽度     var contentW = this.data.text.length * this.data.size;//获取文本大概宽度     var timer = (contentW / screenW) * this.data.moveTimes;//动态计算文字滚动时间     timer = timer < 8 ? 8 : timer; //判断时间是否小于8s     this.setData({ width: -contentW, timer: timer });   } }) 小结：wxss里面使用变量，在js中给定数据，wxml中通过内联样式动态绑定自定义属性--width（--width--这样也行，获取就是var(--width--)）的值，wxss中通过var(--width)的方式接收变量的值，剩下的看注释，都备注上了。

先上图 [图片] wxss: .bannerSwiper {     height:300rpx;     width: 100vw;     position: absolute;     left: 0rpx;     top: 10rpx; } .imageBanner {     width: 100%;     height: 100%;     border-radius: 20rpx;     position: relative;     padding: 0;     line-height: 100%;     background: transparent;     text-align: left; } .imageBanner_small {     transform: scale(0.9);     transition: 0.2s, ease-in 0s;     border-radius: 10rpx;     width: 100%;     height: 100%;     position: absolute;     bottom: 0;     z-index: 100;     padding: 0;     line-height: 100%;     background: transparent;     text-align: left;     opacity: 0.5; } wxml: <view class="container">     <swiper class='bannerSwiper' previous-margin="80rpx" next-margin='80rpx' indicator-dots="true" indicator-color='#999' indicator-active-color='#fff' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}"       duration="{{duration}}" bindchange='onChange' circular='true'>       <block wx:for="{{banner}}">         <swiper-item>           <image  class="{{index==selindex?'imageBanner':'imageBanner_small'}}" style="background:{{item}}"></image>         </swiper-item>       </block>     </swiper> </view> github地址：https://github.com/jieqwer/-Banner

先看效果: [图片] 实现思路： 循环搜索出来的数据，将每条数据再绑定在组件上，在组件中通过observer监听数据，将每条数据的所有关键词都替换成特殊字符包裹的关键词 如：str.replace(new RegExp(`${key}`, 'g'), `**${key}**`) 再通过该字符进行分割转化成数组，遍历数组，判断是否为关键字给出突出样式。 observer 用于监听和响应任何属性和数据字段的变化。可以同时监听多个。一次 setData 最多触发每个监听器一次。同时也可以监听子数据字段 代码片段：https://developers.weixin.qq.com/s/GEHhn7mP77m4

开发一个小程序管理平台，其他小程序管理员只需一次授权给第三方，第三方平台即可帮助他发布小程序，不同管理员的配置参数不同，其他功能都基本相同 开发步骤： 一、注册开放平台： 到微信开放平台注册账号 ：https://open.weixin.qq.com/cgi-bin/readtemplate?t=regist/regist_tmpl&lang=zh_CN 二、申请第三方平台开发 申请第三方平台必须拥有一定的开发者资质，必须先通过开发者资质认证，才可以开始第三方平台开发，在开发平台账号管理中可进行资质认证 三、创建第三方平台 申请完成后，在开发平台的管理中心，点击第三方平台，在下方可看到创建第三方按钮 [图片] 点击创建第三方平台，进入下方页面，选择平台型服务商， [图片] 1.填写基本信息，与定制化服务商一致 2.选择权限，只能选择业务必须的权限集，否则无法通过审核，公众号或小程序也可能会拒绝授权给你。（权限集是公众号或小程序的权限集合，用于实现业务） 3.填写开发资料 4.开发资料 ①授权发起也域名（即用户打开我们自己的授权页域名） ②授权事件接收URL（我们接收所有授权小程序或公众号取消授权通知、授权成功通知、授权更新通知事件的url地址 ， 包括接收微信平台推送的ticket） ③消息与事件接收URL （我们接收所有授权小程序或公众号的消息和事件推送，例如客服消息 微信就会推送到这个地址上） 这里要注意一点：该参数按规则填写（需包含/$APPID$，如www.abc.com/$APPID$/callback） 填写的地址需要包含/$APPID$ 我们后续可以用nginx 重写地址 把访问指向同一个地址就可以了 例如：填写的地址是 www.abc.com/msg/$APPID$/msgEventPath.php    nginx重写地址：  rewrite ^/msg/(.)/(.).php /msgEventPath.php last; ④其它按照提示填写就可以了，添加上白名单ip 然后提交审核就可以了，如果信息没有问题是马上就能审核成功的，然后再管理中心的第三方平台即可看到改第三方服务商，详情里面即有改第三方平台相关的配置信息 四、小程序管理员授权给第三方平台 只有小程序管理员授权给第三方，第三方才能为该小程序发布，更新部署代码。 授权开发步骤： 1.保存component_verify_ticket， 微信端会定时推送消息到配置好的授权事件接收URL（创建三方平台时填写的，可在该三方详情中查看） 上，我们需要保存这个component_verify_ticket和 不断更新，component_verify_ticket必须保持是微信端推送的最新一个 2.用component_verify_ticket去换取第三方平台的token（第三方平台指的就是我们自己在开发的平台）token是有有效期的，所以我们要保存它的过期时间，并将token做缓存，当token没过期时就不用再去换取，反之我们要利用最新的component_verify_ticket去重新获取token 3.换取预授权码pre_auth_code，pre_auth_code是用来换取微信端的授权二维码的 4.跳转到授权页面（两种方式），建议第二种，方便 用户授权的时候会先打开我们自己的一个页面 （例如 http://www.abc.com/authorization.php ），这个页面里需要做一个按钮或者用js去跳转到微信的授权页面 ①扫码授权 ：跳转后得到授权码，注意这个页面只能用网页访问，小程序访问不了，因为不能将微信域名配置为业务域名用户扫码后 就可以授权给第三方平台了 https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid=xxxx&pre_auth_code=xxxxx&redirect_uri=xxxx&auth_type=xxx。 ②点击移动端链接快速授权https://mp.weixin.qq.com/safe/bindcomponent?action=bindcomponent&auth_type=3&no_scan=1&component_appid=xxxx&pre_auth_code=xxxxx&redirect_uri=xxxx&auth_type=xxx&biz_appid=xxxx#wechat_redirect 请求参数（两种方式一样） component_appid 第三方平台方appid pre_auth_code 预授权码 redirect_uri 回调URI 必须和授权地址同一个域名 auth_type 要授权的帐号类型：1则商户点击链接后，手机端仅展示公众号、2表示仅展示小程序，3表示公众号和小程序都展示。如果为未指定，则默认小程序和公众号都展示。第三方平台开发者可以使用本字段来控制授权的帐号类型。 前四步总结（移动端快速授权流程）： 用户自己获取授权连接： 需要后台配合，给出一个接口，请求该接口则直接返回最新的预授权码（pre_auth_code），拿到授权码之后，再通过拼接返回一个授权地址，跳转到改地址，即为授权页面下方图二 ，用户点击授权即可授权给第三方。用户点击授权后，授权页会自动跳转进入回调URI，并在URL参数中返回授权码和过期时间(redirect_url?auth_code=xxx&expires_in=600)，我们可以通过  $GET[‘authcode’] 去获取授权用户的小程序或二维码 调用接口的accesstoken（有效期两小时） 并将其保存/更新，然后我们就可以获取授权用户小程序或公众号的信息 [图片] 5.使用授权码换取公众号或小程序的接口调用凭据和授权信息 接口调用请求说明 http请求方式: POST（请使用https协议） https://api.weixin.qq.com/cgi-bin/component/api_query_auth?component_access_token=xxxx（component_access_token在第二步可获取） POST请求参数示例: { “component_appid”:“appid_value” ,//第三方平台appid “authorization_code”: “auth_code_value”//授权code,会在授权成功时返回给第三方平台 } 请求成功后拿到 authorizer_access_token：授权方接口调用凭据（在授权的公众号或小程序具备API权限时，才有此返回值），也简称为令牌，后面调用小程序待开发的api中使用， authorizer_refresh_token：接口调用凭据刷新令牌（在授权的公众号具备API权限时，才有此返回值），刷新令牌主要用于第三方平台获取和刷新已授权用户的access_token，只会在授权时刻提供，请妥善保存。 一旦丢失，只能让用户重新授权，才能再次拿到新的刷新令牌 五、小程序模板开发 第三方平台帮助旗下已授权的小程序进行代码管理时，需先开发完成小程序模版，再将小程序模版部署到旗下小程序帐号中，具体流程如下： 第一步：绑定开发小程序 （1）第三方平台的开发人员需先到微信公众平台（mp.weixin.qq.com）申请一个普通的小程序并完善小程序的头像、昵称、简介、服务类目等信息。 （2）进入微信开放平台，在第三方平台详情中，将该小程序添加为开发小程序。 注意：绑定为开发小程序后，该小程序的在开发工具中上传，代码会直接上传到开放平台，不会上传到公众平台。 第二步：小程序模版的开发和上传 使用开发小程序的开发者微信号登录微信web开发者工具（IDE），开发者工具中按照正常的小程序开发流程进行代码开发和调试。开发完成后，在开发工具中点击上传。更新模板后需要更部署到旗下小程序之前必须上传到模板库。注意：上传时版本号要求不一样，一样的版本号会被默认为同一版本，判断为管理员没有更新 第三步：添加到小程序模版库，获得模版ID 从开发者工具中上传的代码，会先存在草稿箱中，每个开发小程序只保留最新一份上传记录。开发者可将草稿箱中的代码添加到小程序模版库中，小程序模版库中的模版不会被覆盖。最多可以有五十个代码模版，添加后可以获得模版ID（TemplateID） 拿到模板ID后，再加上之前获取到的authorizer_access_token（令牌），就能为授权过给该第三方平台的小程序部署代码了。 六、为旗下小程序进行代码管理 举个例子：为授权的小程序帐号上传小程序代码 1、为授权的小程序帐号上传小程序代码 请求方式: POST（请使用https协议） https://api.weixin.qq.com/wxa/commit?access_token=TOKEN POST数据示例 { “template_id”:0, “ext_json”:“JSON_STRING”, //ext_json需为string类型，请参考下面的格式 “user_version”:“V1.0”, “user_desc”:“test”, } 参数说明: access_token 请使用第三方平台获取到的该小程序授权的authorizer_access_token template_id 代码库中的代码模版ID ext_json 第三方自定义的配置 user_version 代码版本号，开发者可自定义（长度不要超过64个字符） user_desc 代码描述，开发者可自定义 通过此请求，第三方平台会自动将模板中的代码自动部署到授权给该第三方的小程序上 更多代码管理查看文档 https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1453779503&token=1a70ae891ca6e0339cf56bd1b3c322b0ec86eec9&lang= 持续更新中… 相关文章：https://developers.weixin.qq.com/community/develop/doc/0000ee097e0f00dcd55b8e40856800?jumpto=reply&parent_commentid=00004e9efb84388cd95ba8023514&commentid=000c0623e98068f0e85be2b97564

一切从这里开始

首先设置文字大小，加粗，设置一个背景，是这样的效果   font-size: 50px;   font-weight: bold;   background: url('https://images.cnblogs.com/cnblogs_com/mxiaoli/1534426/t_timg.jpg')no-repeat; [图片] 再加上这一句，你会发现背景图片消失了   -webkit-background-clip: text; [图片] 再加一句 color: transparent;就是这样的效果 [图片] 如果你还想更花里胡哨一点，可以加动画让它动起来,就像这样 [图片] WXML代码:  <view class="bg">小黎，低头是题海，抬头是远方 There are no shortcuts to any place worth reaching</view> WXSS代码: .bg {   font-size: 16px;   font-weight: bold;    color: transparent;   background: url('https://images.cnblogs.com/cnblogs_com/mxiaoli/1534426/t_timg.jpg');   -webkit-background-clip: text;   animation: move 20s linear infinite; } @keyframes move {   0% {     background-position: left;   }   50% {     background-position: right;   }   100% {     background-position: left;   } } 总结：-webkit-background-clip:text;这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。再通过设置文字颜色为透明，就能出现这样的效果 注意：-webkit-background-clip: text;属性必须写在设置背景属性之后。因为设置在之前裁剪什么，空气么？