微信小程序
文章平均质量分 56
我要看一下山顶的风景
Stand out or Get out.
展开
-
微信小程序5--svroll-view
scroll-view就是用来设置滚动视图存在的。 1.scroll-x和scroll-y(控制view的滚动方向) <1>index.wxml<!--index.wxml--><view ><view class="title"> scroll-view</view><scroll-view class="scroll-y" scroll-y="true"><view class="y原创 2016-11-02 22:53:13 · 961 阅读 · 0 评论 -
微信小程序3--准备工作
接下里开始我们微信小程序的准备工作, 首先需要你把系统自己创建的helloworld程序删成下面的样子1.index.js是这样子 1.index.wxml是这样子 1.index.wxss是这样子 .1.app.js是这样子 1.app.json是这样子 1.app.wxss是这样子 这样你的程序就达到了一种最简洁版,为了更好的让你理解微信小程序的框架.那么开始我们的第一步学习。原创 2016-10-12 18:40:40 · 987 阅读 · 0 评论 -
微信小程序2--框架分析(开发注意事项)
在你打开你的hello world微信小程序之后你会看到: 1. pages pages 目录下存放着你这个小app的所有页面。比如index目录下存放的就是你现在看到的这个页面, 在你点击你自己的头像以后就会跳转到logs目录下的logs页面 在每个页面下面都有四个子文件: (注意:每个页面下的四个文件的名称必须一致) (还要注意:后缀名为js和wx原创 2016-10-31 22:43:55 · 1169 阅读 · 0 评论 -
微信小程序16---悬浮按钮的实现
1.上图 2.index.wxss重点在于position设置为fixed,然后就是位置bottom,right。left,top的设置.post { float: right; background-color: #ffffff; position: fixed; bottom: 20px; right: 10px; border: 0 sol原创 2016-11-16 22:19:59 · 16307 阅读 · 2 评论 -
微信小程序15---将组件设置为圆形
1.上图 2.index.wxss宽高和弧度的设置.circle{ width: 100px; height: 100px; border: 0 solid #ffffff; border-radius: 500px; box-shadow: 4px 1px 1px #cccccc;}原创 2016-11-16 22:11:55 · 13242 阅读 · 4 评论 -
微信小程序14---卡片类view的实现
1.首先上效果图2.index.js中//重点在于阴影的设计.card { border: 2px solid #ffffff; border-radius: 5px; background-color: #ffffff; box-shadow: 4px 1px 1px #cccccc; margin: 8px; position: relative原创 2016-11-16 22:02:43 · 16065 阅读 · 1 评论 -
微信小程序13--通过api接口将json数据展现到小程序上
实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上。 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上。 1.用到的知识点<1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识2.实现原理首先,先看一下这个原创 2016-11-14 22:34:10 · 52484 阅读 · 10 评论 -
微信小程序1--开篇
1.开篇 什么是微信小程序?简单来说:就是一款在线APP(功能简单版),至于它的入口,类似于微信公众号,会在微信“发现”界面提供一个微信小程序入口,点击进去可以看到一些推荐的小程序,还会提供一个搜索框,便于找到你想用的app。微信已经有订阅号、服务号、企业号,为什么会出现微信小程序呢? 因为这三种微信号的用户体验并不是很好,功能简单,基本都是采用一个模板开发出来的。所以腾讯公司为了更好的服务用原创 2016-10-31 20:45:28 · 1006 阅读 · 0 评论 -
微信小程序12---页面跳转
页面跳转的实现其实很简单,首先你的知道事件绑定,然后就好办了,还是上代码把1.index.wxml.……bindtap就是给这个按钮绑定一个点击事件,点击这个按钮时,会触发名字叫做 clickMe的事件,clickMe的具体内容在index.js中<view class="page"><view> <button id="view1" type="primary" bindtap="clic原创 2016-11-10 22:12:45 · 1158 阅读 · 0 评论 -
微信小程序11---模板template
模板呢,就是为了方便你重复写一些代码而建立的,目前我指发现它的功能适合建立一些表格类型的数据, 比如,录入认得信息啥的(都有名字,年龄,性别啥的) 1.index.wxml代码<view class="page"><template name="aafa"><view> <text> 姓名:{{name}} 年龄:{{age}}</text> </view></template>/原创 2016-11-09 22:30:12 · 3359 阅读 · 0 评论 -
微信小程序10---条件语句if和循环语句for(三目运算+hidden)
在微信小程序的官方文档中,将这两个语句归化在框架的视图层,分表叫条件渲染和类表渲染,其实他就是封装了这两条语句而已。上图(循环语句if) 1.它是通过在index.js中设置数据,然后再index.wxml中进行判断,首先上index.wxml的代码。//微信是封装过if语句的,你只要在index.js中设置好值,然后就可以直接想这样拿来判断了,还有这是class=“view”效果放在判断语句中是原创 2016-11-09 21:45:47 · 52129 阅读 · 0 评论 -
微信小程序9---Button按钮和icon图标
Button 按钮 首先提醒一下大家,如果你现在button标签不能用,不用担心,那是因为微信小程序存在一个bug,你仔细看一下你的button标签的代码是不是这样的<button>Content<button/>//而正确的代码是这样的<button>Content</button>找到不同了嘛,哈哈1.在index.wxml中设置button按钮 上图 上代码<view class=原创 2016-11-07 23:35:39 · 61392 阅读 · 0 评论 -
微信小程序8-swiper(滑动面板)
swiper就是为了以后做轮播图用的。下面是一些它的属性 . 1.首先新建一个page(记得在app.json中注册),上效果图。 . 2.index.wxml中的代码<swiper class="view-item" indicator-dots="true" autoplay="true"><swiper-item class="bg-green"><view >Content</原创 2016-11-07 23:12:34 · 7663 阅读 · 0 评论 -
微信小程序 数据绑定 条件循环
微信小程序中数据绑定//首先在index.wxml中写好变量<view >{{message}}</view>//array来之index.js中,item是官方提供的自由的循环数组内部数据的原语<view wx:for="{{array}}">{{item}}</view>//view来之index.js中,然后对view进行判断<view wx:if ="{{view =='weixin'原创 2016-10-13 14:59:54 · 5934 阅读 · 0 评论 -
微信小程序7---image组件
Image組件的使用<view class="cotainer"> <view class="flex item"> <view class="item-middle"> <image src="../images/a.png"></image> <image src="www.baidu.com/a.png"></image>原创 2016-11-03 23:36:02 · 1254 阅读 · 0 评论 -
微信小程序6---事件交互
微信小程序—点击事件什么是事件? 指点击,触摸,按下,滑动,松开,等一系列对手机屏幕操作。下面代码所要呈现的效果就是给两个按钮一人一个ID然后点击谁,在上面显示信息那就显示 点击了谁,点击了多少次,这多少次没有分开啊,次数是点击他两的总和。下面另一代码是分开的,各计各的。 1. 在index.wxml 中设置点击事件<view class="page"> //点击后在这里显示原创 2016-11-03 23:00:53 · 1797 阅读 · 1 评论 -
微信小程序 Button按钮与Icon图标
Button 按钮介绍在index.wxml中设置button按钮<view class ="container">//设置button的大小 <button size="mini|default">按钮</button>//设置button类型<button type="warn|default|primary">按钮</button>//是否透明<button plain="true原创 2016-10-13 11:17:52 · 10998 阅读 · 0 评论 -
微信小程序4--View组件
flexbox 存在于CSS布局中1. flex-direction—弹性容器的方向 然后我们用第3篇中的最简化小程序来跑一下 <1>首先我们需要在index.wxml中编写<!--index.wxml--><view class="zhangsan"> //class就是为了给这个view起个名字,为了在index.wxss中给它布置属性的时候知道是给zhangsan布置属性原创 2016-11-01 22:43:43 · 10959 阅读 · 0 评论