小程序

小程序可以用的css框架有weui、vant、bootstrap、ant design等等。详细介绍：1、weui，提供了丰富的组件和样式，可以帮助开发者快速构建出符合微信风格的界面；2、vant，样式和组件都经过了优化，可以在小程序中快速加载和渲染，提升用户体验；3、bootstrap，样式和组件经过了广泛的测试和优化，可以在小程序中稳定运行，提供良好的用户体验等等。 本教程操作系统：Windows10系统、Dell G3电脑。 随着小程序的快速发展，越来越多的开发者开始关注小程序的前端开发。在小程序的前端开发中，CSS框架是一个非常重要的工具，它可以帮助开发者快速构建出漂亮、响应式的界面。那么，小程序应该使用哪种CSS框架呢？在本文中，我们将介绍几种常用的CSS框架，并分析它们的优缺点，帮助开发者选择适合自己项目的CSS框架。 1. WeUI WeUI是微信团队推出的一款基于Vue.js的CSS框架，它专门为微信小程序设计。WeUI提供了丰富的组件和样式，可以帮助开发者快速构建出符合微信风格的界面。WeUI的特点是简洁、易用，而且具有良好的兼容性。开发者只需要引入WeUI的样式文件，然后按照文档中的说明使用组件，就可以轻松地构建出漂亮的界面。 立即学习“”； 2. Vant Vant是一款基于Vue.js的移动端UI组件库，它提供了丰富的组件和样式，适用于各种移动端项目，包括小程序。Vant的特点是灵活、易用，而且具有良好的可定制性。开发者可以根据自己的需求选择需要的组件，并根据文档中的说明进行配置和使用。Vant的样式和组件都经过了优化，可以在小程序中快速加载和渲染，提升用户体验。 3. Bootstrap Bootstrap是一款流行的响应式CSS框架，它提供了丰富的样式和组件，适用于各种Web项目，包括小程序。Bootstrap的特点是功能强大、易用，而且具有良好的可扩展性。开发者可以根据自己的需求选择需要的样式和组件，并根据文档中的说明进行配置和使用。Bootstrap的样式和组件经过了广泛的测试和优化，可以在小程序中稳定运行，提供良好的用户体验。 4. Ant Design Ant Design是一款基于React.js的UI组件库，它提供了丰富的组件和样式，适用于各种Web项目，包括小程序。Ant Design的特点是美观、易用，而且具有良好的可定制性。开发者可以根据自己的需求选择需要的组件，并根据文档中的说明进行配置和使用。Ant Design的样式和组件经过了精心设计和优化，可以在小程序中提供出色的用户体验。 总结起来，小程序可以使用多种CSS框架，每个框架都有自己的特点和优势。开发者可以根据项目需求和个人喜好选择适合自己的CSS框架。无论选择哪种框架，都需要注意框架的兼容性和性能，以确保小程序的稳定运行和良好的用户体验。 以上就是小程序用什么的详细内容，更多请关注米云其它相关文章！

本篇文章给大家带来的内容是关于小程序自定义组件的实现（案例解析），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 本文将结合案例，来阐述自定义组件实现。先来上图 这个是一个购物车的数量组件。主要思路：  1、可以手动的输入具体的数量  2、可自定义设置最小值、和最大值。当是最小值时，“-”号置灰，并不可点击。当是最大值时，“+”号置灰，并不可点击。  3、当手动输入“0”开头的数字时，自行过滤，禁止输入，只值输入非0数字。  4、当手动输入数字大于最大值时，输入框失去焦点，默认将输入值置为最大值。或者当手动输入数字小于最小值时，输入框失去焦点，默认将输入值置为最小值  5、如果属性值minNum最小值、或者maxNum最大值设置为NaN，则表示最小值和最大值的大小没有输入的限制  6、默认最小值和最大值是没有限制的，可以随便输入 一、使用自定义组件的方式 1、js文件中： 输入框数值变化最终响应的函数   showNumber: function (e) {     var num = e.detail.num   }, 登录后复制 2、json文件中： {  "usingComponents": {     /**     *  key:自定义组件的别名，在使用组件时用到。相当于Android自定义控件在xml文件中的申明的命名空间     *  value: 自定义组件的全路径     */     "component-option-num": "/component/optionNumber-component/optionNumber-component"   } } 登录后复制 3、wxml文件中：  1、这里设置了最小值是0，最大值是20。  2、bindoptionNum：是由bind+”optionNum”自定义组件回调函数的名称组成。当自定义组件的函数回调是，这个属性指定的方法bindoptionNum将被响应。并可以获取传入的值…

摘要: 我们都知道由于微信小程序开发文档和工具的限制，js文件不能直接操作wxml文件，开发者不能进行dom操作，所以在此创建组件必须先把组件结构定义好！也就是说必须在wxml文件中先定义好组件结构，然后再绑定数据，根据j … 我们都知道由于微信小程序开发文档和工具的限制，js文件不能直接操作wxml文件，开发者不能进行dom操作，所以在此创建组件必须先把组件结构定义好！也就是说必须在wxml文件中先定义好组件结构，然后再绑定数据，根据js文件中的数据进行动态渲染。我们在开发日历小程序时（本站也曾经介绍过两篇小程序日历的源码demo，有兴趣的朋友可以了解下：一款非常NB的日历转换器（阳历-农历）的微信小程序源码demo 和微信小程序：日历demo下载）就会发现，这里的日历由两部分组成，一是上部红色，而是下面主要日历部分。上部直接绑定数据。 下部分实现方式： 第一行星期的显示，此处为固定显示，无需js操作。然后下面的日历body部分，由于每周七天，绑定的数据可根据此生成，根据当前日期生成每行的数据。 日期生成： 取当前月第一天，得到星期，计算上月在第一行的日期，如下图红色框中的部分： 以当前日期为例，本月一号位周六，当前月份可显示上个月6天；计算当前月(或指定月份)最后一天的星期天数，取得下个月可在本月显示日期。最后合并本月日期，并按每行七日排列，即可生成当前月分的日历数据。以下贴出代码： wxml代码： <view>     <view>         <view>{{canlender.date}}日</view>         <view>{{canlender.month}}月</view>     </view>     <view>         <view>日</view>         <view>一</view>         <view>二</view>         <view>三</view>         <view>四</view>         <view>五</view>         <view>六</view>     </view>     <view>         <block>             <view>…

微信网页授权登录是非常常用的功能，为了帮助大家学习。这篇文章主要介绍了ajax 实现微信网页授权登录的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 项目背景 因为项目采用前后端完全分离方案，所以，无法使用常规的微信授权登录作法，需要采用 ajax 实现微信授权登录。 需求分析 因为本人是一个phper ，所以，微信开发采用的是 EasyWeChat ，所以实现的方式是基于EW的。 其实实现这个也麻烦，在实现之前，我们需要了解一下微信授权的整个流程。 引导用户进入授权页面同意授权，获取code 通过code换取网页授权access_token（与基础支持中的access_token不同） 如果需要，开发者可以刷新网页授权access_token，避免过期 通过网页授权access_token和openid获取用户基本信息（支持UnionID机制） 其实说白了，前端只需要干一件事儿，引导用户发起微信授权页面,然后得到code,然后跳转到当前页面,然后再请求后端换取用户以及其他相关信息。 功能实现 引导用户唤起微信授权确认页面 这里需要我们做两件事，第一去配置jsapi域名，第二配置微信网页授权的回调域名 构建微信授权的url “https://open.weixin.qq.com/connect/oauth2/authorize?appid=” + appId + “&redirect_uri=” + location.href.split(‘#’)[0]…

在微信官方的文档中，我们看到这样一句话： 在 iphone 6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。开发微信小程序时设计师可以用 iphone 6 作为视觉稿的标准。也就是说，设计师在设计小程序时，可以这样做： 直接以 iPhone 6 的屏幕尺寸（375×667）用作视觉稿尺寸，1 px =…

这篇文章主要介绍了微信小程序中使用promise进行异步流程处理的实例详解的相关资料,这里详细说明该如何使用promise 来进行异步流程的处理，提供具体实现步骤，需要的朋友可以参考下 微信小程序中使用Promise进行异步流程处理的实例详解 我们知道，JavaScript是单进程执行的，同步操作会对程序的执行进行阻塞处理。比如在浏览器页面程序中，如果一段同步的代码需要执行很长时间（比如一个很大的循环操作），则页面会产生卡死的现象。 所以，在JavaScript中，提供了一些异步特性，为程序提供了性能和体验上的益处，比如可以将代码放到setTimeout()中执行；或者在网页中，我们使用Ajax的方式向服务器端做异步数据请求。这些异步的代码不会阻塞当前的界面主进程，界面还是可以灵活的进行操作，等到异步代码执行完成，再做相应的处理。 一段典型的异步代码类似这样： function asyncFunc(callback) {  setTimeout(function () {   //在这里写你的逻辑代码   //...   //逻辑代码结束，执行一个回调函数   callback();  }, 5000); } 登录后复制 或者： function getAccountInfo(callback, errorCallback) {  wx.request({   url: '/accounts/12345',   success: function (res) {    //...    callback(data);   },   fail: function (res) {    //...    errorCallback(data);   }  });…

本篇文章给大家带来的内容是关于微信小程序如何调用后台service（图文教程），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 写在前头，本篇文章简单记录一下，在前后端分离的微信小程序应用中，前端访问后台service的实现思路，没有过多涉及技术实现方面。 先上一张官网的图片，它很清楚的讲明了要在后台service为每一个小程序用户提供登录信息需要做哪些事情。用户拿到了后台给的登录凭据，访问后台service。 静默授权与非静默授权 先来讲讲这两个概念，静默授权，顾名思义，这授权动作对于用户来说是感知不到的，小程序端悄咪咪得就做了。因此，没有知会用户的授权方式拿到的信息也是不太重要的。但是，静默授权是开始重要的一步，因为它为接下来的动作提供了code。调用静默授权可用小程序提供的API:wx.login()。再来讲讲非静默授权，顾名思义，它的授权是要有明显动静的，而且它是要得到用户认可才可以执行。API:wx.getUserInfo()，这个接口要不要用可根据小程序的实际需求来。 后台获取openId 小程序提供了一个接口code2session，拿着我们静默授权获取到的临时登录凭证code再调用一下这个接口就能获取到openId了。openId是在当前小程序中对用户唯一性的标识。注意，这一步是在后台服务器做的，我们参考一下官网的文档（后端API）就会更清楚了。它说： 后端API不能直接在小程序内通过wx.request调用，即api.weixin.qq.com不能被配置为服务器域名。 但是我们会有疑问，我们在自己开发的时候，在小程序端调用是success的，和官网说的并不一样。如果你碰到和我一样的疑问可以看看这个（重点在4.4.2服务器接口）。 基于OAuth2.0生成token 在后台，可以用SpringSecurity的OAuth2.0这一个工具，用openId来生成前端请求后端数据的附带校验信息token。具体是如何实现的笔者也没有深入了解……获取到了这个token后，前端可将其存入webStorage中，每一次调用后台service的时候，就可以利用请求的拦截器在config参数中加入token。后端就可以确定发送请求的用户身份，保证了系统的安全性。 总结：以上大致描绘了小程序后台自定义登录态的开发思路。 本文参考：微信小程序开发基础教程 https://www.html.cn/study/20.html 以上就是微信小程序如何调用后台service（图文教程）的详细内容，更多请关注米云其它相关文章！

微信拍了拍功能 微信拍了拍的功能，需要通过双击好友的头像触发，在个人聊天界面和群聊中都可以使用。使用该功能后，对方会出现拍了拍的提示，同时手机会进行振动。 如果没有拍了拍的功能，需要将微信升级到最新版本。该功能安卓端和iOS端均可以使用。iOS端需要将微信升级到7.0.13版本。 安卓端使用拍了拍功能，则需要将微信升级到7.0.15版本，才可以使用。 如果已经是新版本的微信，双击头像不会出现拍了拍，需要在设置内，点击退出的选项，将微信账号退出重新登录即可。 满足以上条件后，双击对方的头像就可以使用拍了拍功能。下面是安卓和iOS端接收拍了拍的效果。 微信拍了拍好友 更新了以后，要想去拍一拍好友就很简单了：双击一下好友的头像，可以看到头像是有闪动的效果的，然后下面就会看到显示的有你拍了这个好友了。 我们可以看到自己拍了谁，但是如果好友的微信不是最新版的话，那他是看不到我们的这个提示的，只有他也更新到最新版本，大家都是了，才可以互相看得到，要不然就是自己自娱自乐了。 微信拍了拍自己 另外我们除了拍一拍好友，我们还可以拍自己的，方法和拍好友一样，双击自己的头像就可以了，所以不知道微信更新的这个功能的意义是什么呢？尤其是拍自己。 很多好友说，因为显示的是拍了拍，感觉自己有了明星的感觉，可以给他们说，不要拍了，不要拍了。当然了这个只是一个玩笑了。 不同于QQ的皮肤，广告，各种VIP，各种钻，微信虽然简单但实用，清爽，如今消无声息的上线了这一新功能，也算是给广大用户来点新花样，同时也不会骚扰到某个用户，可谓独具匠心。 相关免费学习推荐： 以上就是微信拍了拍功能在哪？的详细内容，更多请关注米云其它相关文章！

这篇文章主要介绍了微信小程序 购物车简单实例的相关资料,需要的朋友可以参考下 微信小程序，这里实现购物车功能的小demo,有需要此功能的朋友可以参考下。 : 加减商品数量，汇总价格，全选与全不选 设计思路： 一、从网络入以下数据格式的 1.购物车id：cid 2.标题title 3.数量num 4.地址 5.价格price 6.小计 7.是否选中selected 二、点击toggle操作 如已经选中的，经点击变成未选中，反之而反之 点击依据index作为标识，而不用cid，方便遍历 三、全选操作 首次点击即为全部选中，再次点击为全不选，全选本身也跟随toggle变换 四、点击结算按钮，将已选中的cid数组取出，以供通过网络提交到服务端，这里给个toast作为结果演示。 五、利用stepper作加减运算，同样依据index作为标识，点完写回num值。 六、布局，全选与结算按钮底部对齐，购物车商城自适应高度，类似于的weight。 步骤： 初始数据渲染 1.1 布局与样式表 上方是一个商品列表，下方是一个全选按钮与立即结算按钮 商品列表左部为商品，右上为商品标题，右下为商品价格与数量，其中商品数量使用WXStepper来实现加减操作…

1.1 组件 tabbar tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。 微信小程序提供了一个组件tabBar用来实现多tab分页功能。如果我们的小程序是一个多 tab 应用（客户端窗口的底部有tab栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。 1.2 配置位置    "tabBar": {     "color": "#a9a9a9",     "selectedColor": "#1f1f1f",     "backgroundColor": "#fefefe",     "borderStyle": "white",     "list": [       {         "pagePath": "pages/main/main",         "text": "首页",         "iconPath": "image/icon_home.png",         "selectedIconPath": "image/icon_home_select.png"…