在网页中设置body,html{height:100%}; 将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微信小程序中,是没有dom对象的,但是我们看调试工具可以看到在dom树(我也不知道怎么叫了,就这么叫吧)中,根节点是page,所以我们来试试使用page{height:100%} <view class='index-wrapper'> <view class='index-userinfo-

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 API分析 启动页 轮播图 日报列表 浮动按钮 侧滑菜单 API分析 以下是使用到的具体API,更加详细参数和返回结

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 日报详情页 底部工具栏 评论页面 日报详情页 日报的内容也是最难做的,因为接口返回的内容是html-,天呀,是html

一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 view 视图容器 icon  图标 scroll-view 可滚动视图容器 text 文字 swiper 可滑动的视图容器 progress 进度条 三.表单组件(Form) 四.操作反馈组件(Interaction) 组件名 说明 组件名 说明 button 按钮 action-sheet 上拉菜单

骨架屏 - “与其等待网络加载,不如提前给点暗示” 注:不适用复杂交互效果 演示 示例解释以及使用全在index.wxml中,观看需了解组件使用. 示例下载:微信小程序-骨架屏演示

微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 view 视图容器 icon  图标 scroll-view 可滚动视图容器 text 文字 swiper 可滑动的视图容器 progress 进度条 三.表单组件(Form) 四.操作

一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 view 视图容器 icon  图标 scroll-view 可滚动视图容器 text 文字 swiper 可滑动的视图容器 progress 进度条 三.表单组件(Form) 四.操作反馈组件(Interaction) 组件名 说明 组件名 说明 button 按钮 action-sheet 上拉菜单

一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的机会,对于企业宣传,拉新用户存在变革性的影响. 小程序的本质是:轻应用,就是不用安装就能使用的手机APP. “跳一跳”养成了大家下拉寻找常用小程序的习惯. 小程序对开发者而言也是非常友好的. 微信就是一个“虚拟机”,小程序使用JavaScript编程,小程序将JavaScript翻译为机器能够识别的

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序日记--高仿知乎日报(上) 微信小程序日记--高仿知乎日报(中) 微信小程序日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 主题日报 我的收藏 设置 图片修正 主题日报 主题日报的样式跟首页几乎一模一样,区别在多了一行主编区域.不过这个主编区域没有实现

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. WXSS 用来决定 WXML 的组件应该怎么显示. 为了适应广大的前端开发者,我们的 WXSS 具有 CSS 大部分特性. 同时为了更适合开发微信小程序,我们对 CSS 进行了扩充以及修改. 与 CSS 相比我们扩展的特性有: 尺寸单位 样式导入 尺寸单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375

2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜.在做demo小示例的过程中,我发现了一个极为让人为难的事儿:**如何让 less/sass 文件转成小程序的 wxss 文件**.</font>对于基本不使用原生css,而习惯编写less的我,这个事儿让我的样式编写相当的吃力.在尝试配置koala (一个可以编译less/sass的工具)以及搜索各种资料后,终于找到了

一.wxss简介 wxss是微信小程序的样式文件,同h5框架的css类似,它具有以下特性: 二.外联样式导入 我们可以通过@import引入外部文件的样式 小程序样式是从上到下,从左到右执行的,如果样式中设置相同属性,则会覆盖外联样式:如果内联样式有相同属性则会覆盖样式 三.内联样式  通过style引入,一般的动态样式写入style,静态样式写入class

在web 或者webapp开发中我们习惯了直接饮用本地图片做背景,例如 .aaa { background: url('img/1.png'); } 但是这种引用方式在微信小程序中是无法使用的,控制台会显示如下 不允许使用本地路径. 于是我将路径替换为非本地路径试试: .u-img-leftIcon { background: url('http://192.168.31.163:8020/pr/source/img/searchLeft.png') no-repeat; background-

<template> <div> <a @click="isShow">half-screen-dialog</a> <!--BEGIN half-screen-dialog--> <!-- mpvue微信小程序不支持vue中的transition --> <div v-if="show"> <div class="weui-mask" @click=&qu

一.什么是选择器 选择器就是选择标签所用样式的模式,即:以什么方式设置样式. 二.微信小程序的样式选择器 .calss就是选择器的一种 三.选择器的优先级 element表示样式元素:.element表示class:#element表示id,style表示内联:!import提升权重 例如:

小程序引入外部文件的方式是: 只需要在其css文件写上: @import "外部css地址.wxss"; 因为项目需要, 小程序中需要使用iconfont , 很容易就想到了H5的引入方式: @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1485242349767'); /* IE9*/ src: url('iconfont.eot?t=1485242349767#iefix') form

小程序制作扭蛋机 2019-09-24 13:26:53 公司要制作活动小程序,其中有一个扭蛋机的效果实现抽奖的功能.在网上找了好久竟没有找到(不知道是不是我找代码的方式有问题).最后还是自己做一个吧- _ - ,效果如下: 1.wxml 当然我这里没有用wx:for遍历 <!-- 扭蛋机 --> <view class="egg"> <image class="egg_ji" src="{{imgUrl}}small_pro

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_118 手机抓包是一名测试工程师常备的技能,比如我想查看一个接口请求的参数.返回值,还有移动设备上的http请求.https请求,这一次的背景是我们想要在app端和小程序端抓取一些视频,这里用腾讯视频作为例子,使用mac系统的Charles软件(有点类似win系统中的fiddler,使用方式上大同小异)来进行视频接口与地址的抓包和嗅探. 同时抓包工具也有利于线上生产环境问题的分析,前几天有个做服务端的同学跟我说他不用抓包工具,遇

wxml: <view class="page-section-spacing"> <view> <text>商家列表</text> </view> <scroll-view scroll-y="true" class="page-scroll-style" bindscrolltolower="scroll"> <block wx:for=&quo

1.在全局app.js中获取设备的宽度 globalData: { userInfo: null, sysWidth:wx.getSystemInfoSync().windowWidth, //图片宽度 } 2.在其他js中加载时设置高度变量 如a.js var appInstance = getApp(); console.log(appInstance.globalData.sysWidth); this.setData({ sysWidth: appInstance.globalData.