微信开发
文章平均质量分 67
自己想做微信小程序,从头学起。
honey199396
记录自己工作中遇到的点点滴滴沟壑。
展开
-
微信小程序(学习十二) -- json文件可用配置(window属性)
微信小程序中有很多可以在.json文件设置的属性,包括设置小程序的状态栏、导航条、标题、窗口背景色等,window 属性 类型 默认值 描述 navigationBarBackgroundColor HexColor 000000 导航栏背景颜色,如”#000000” navigationBarTextStyle String ...原创 2018-05-05 00:40:23 · 1971 阅读 · 0 评论 -
微信小程序(学习十一) -- 视图层(WXML)条件判断与循环控制
条件判断 wx:if在微信小程序的视图层(wxml)文件中可以使用条件判断,动态的显示一个组件或者执行另外的渲染试图。使用wx:if="{{condition}}" 来判断是否需要渲染该代码块,也可以用 wx:elif 和 wx:else 来添加一个 else 块:<view wx:if="{{condition}}"> True </view><vie...原创 2018-05-05 00:21:30 · 19006 阅读 · 0 评论 -
微信小程序(学习十) -- WXML数据绑定
微信WXML文件属于微信视图层显示文件,实际上是一段被微信封装过的H5代码,最终也是显示在微信界面上,它的动态数据来自对应Page的data数据。 例如:(在wxml中显示我的头像,对应于page中的data数据(userInfo)),最终显示效果如下图。<!--pages/start/index.wxml--> <view class="userinfo"> ...原创 2018-05-05 00:03:41 · 1933 阅读 · 1 评论 -
微信小程序(学习九) -- 小程序动画实现旋转(animation @keyframes)
前端一定离不开一个东西,动画,无论是游戏还是app还是网页,都一定有动画效果,微信小游戏,小程序也有动画效果,这里有三种办法实现小程序的动画效果。 1、每帧setData()onReady: function () { var that = this; setInterval(function(){ that.onUpdate(); },1000/60...原创 2018-04-26 11:34:07 · 20415 阅读 · 7 评论 -
微信小程序(学习八) -- 使用CSS创建各种图形(三角形,椭圆形)
分享一个使用CSS实现了各种形状效果的网址:CSS-Tricks原创 2018-04-24 18:51:47 · 10474 阅读 · 1 评论 -
微信小程序(学习七) -- 去掉button边框
微信小程序中的button默认有边框,要去掉边框也是很简单。.reward { width: 150rpx; height: 60rpx; background-color: white; display: flex; justify-content: space-between;}.reward::after { border: none;}上面的代码...原创 2018-04-19 15:56:29 · 1891 阅读 · 0 评论 -
微信小程序(学习六) -- 回退Canvas绘图
关于Canvas如何绘制涂鸦,请看上一章该节是基于上一节做的修改,布局和样式表都一样。 <view class="box_box6" bindtap="recoverCanvas"> <image src='/images/recover.png'></image></view>.canvas_tools .box_box6 {...原创 2018-04-18 17:16:00 · 1888 阅读 · 3 评论 -
微信小程序(学习五) -- 使用canvas实现涂鸦效果
自己实现了一个涂鸦效果,需要的可以看看,代码可以直接使用就不给下载地址了。<!--pages/draw.wxml--><view class="container"> <view class="canvas_area"> <canvas canvas-id="myCanvas" class=&原创 2018-04-18 15:37:47 · 5168 阅读 · 2 评论 -
微信小程序(学习四) -- 页面渐变色
实现下面的页面渐变色: /* pages/draw.wxss */page{ height: 100%;}.container { background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #055cfb), color-stop(1, #fe0000));}<...原创 2018-04-18 14:16:15 · 1668 阅读 · 0 评论 -
微信小程序(学习三) -- 区分分享到个人或者分享到群
假如我们的微信小程序有一个对战功能,对战是需要观战的,我们需要将分享发送到群,发送到个人是无效的,这个时候我们就需要在程序内知道用户是分享到个人的还是分享到群。 效果如下: 实现:<!--index.wxml--><view class="container"> <view class='question'> <text st...原创 2018-04-17 17:00:38 · 3208 阅读 · 0 评论 -
微信小程序(学习二) -- setData(页面数据刷新)
微信小程序提供了将数据从逻辑层发送到数据层的函数setData。 Page.prototype.setData() setData 用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。首先要注意的是: 1、直接修改 this.da...原创 2018-04-13 11:49:16 · 24424 阅读 · 0 评论 -
微信小程序(学习一) -- 页面Page生命周期
Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。Object参数说明 属性 类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数–监听页面加载 onReady Function 生命周期函数- -监听页面初次渲染...转载 2018-04-13 11:00:48 · 1225 阅读 · 1 评论