![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
碵蝎
这个作者很懒,什么都没留下…
展开
-
16.input
小程序中的input,与html中的input很类似,input 组件所支持的属性如下:例子<input type='text' value='' password='{{password}}' placeholder='请输入用户名' placeholder-class='font' placeholder-style='font-size: 35rp...原创 2020-03-30 11:13:51 · 182 阅读 · 0 评论 -
15.switch滑动开关
switch 组件具有提供提供表单组件开关按钮;.switch 组件所支持的属性如下:例子<switch type='switch' checked='{{flag}}' bindchange='myChange'/>Page({ data: { flag : true }, myChange: function (e) { ...原创 2020-03-29 18:18:36 · 326 阅读 · 0 评论 -
14.radio、checkbox
radio 组件具有提供提供表单组件单选按钮;radio 组件所支持的属性如下:例子<radio-group bindchange="change"> <radio value='男' checked='true'>男</radio> <radio value='女'>女</radio></radio...原创 2020-03-27 14:48:37 · 225 阅读 · 0 评论 -
13.text
text 组件具有提供提供基础内容组件;text 组件所支持的属性如下:selectable文本是否可选,需要在真机上测试space<text>点我 哈哈哈哈哈</text>如上图,虽然代码上写了很多个空格,但是界面只显示一个空格解决方法是给text一个space属性<text space="nbsp"&g...原创 2020-03-27 11:54:27 · 337 阅读 · 0 评论 -
12.progress
progress 组件具有提供提供基础内容组件,progress 组件所支持的属性如下:例子<progress percent='20' /><progress percent='30' show-info='true' /><progress percent='40' show-info='true' stroke-width='30' />...原创 2020-03-27 11:09:29 · 205 阅读 · 0 评论 -
11.icon
icon 组件具有提供提供基础内容图标组件;icon 组件所支持的属性如下:例子<icon type="success"/><icon type="success_no_circle"/><icon type="info"/><icon type="warn"/><icon type="waiting"/>&l...原创 2020-03-27 10:54:32 · 227 阅读 · 0 评论 -
10.swiper
swiper组件具有提供视图容器滑动的功能,组件所支持的属性如下 :例子<swiper indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}" autoplay=...原创 2020-03-27 10:34:29 · 537 阅读 · 0 评论 -
09.scroll-view
scroll-view 组件具有提供滚动方式的容器,组件所支持的属性如下:接下来一个个属性来测试,先创建一个scroll-view<scroll-view class='scroll-view'> <view class='view-item' style='background: green;'>1</view> <view...原创 2020-03-26 17:24:15 · 394 阅读 · 0 评论 -
08.JS逻辑交互
事件绑定<view> <text bindtap="myClick">点我</text></view>Page({ myClick(){ console.log('click'); } });事件冒泡view和text都绑定事件<view bindtap='viewClick'>...原创 2020-03-26 15:05:46 · 374 阅读 · 0 评论 -
07.rpx布局与样式导入
rpx可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在iPhone6 上,屏幕宽度为 375px,共有 750 个物理像素,则 750rpx =375px = 750 物理像素,1rpx = 0.5px = 1 物理像素。(具体不同手机参数,可以参考微信小程序手册);ps :简单的说就是如果设计稿是750px的宽度,则我们开发的时候,字体和图片是多少px,我们就写多少r...原创 2020-03-26 12:16:53 · 351 阅读 · 0 评论 -
06.条件渲染和列表渲染
条件渲染条件渲染就是if、else if 、和 elsePage({ data: { number : 4 }});<view wx:if="{{number <= 0}}">number的值小于等于0</view><view wx:elif="{{number > 0 && number < ...原创 2020-03-25 15:50:16 · 187 阅读 · 0 评论 -
05.变量和函数的定义与访问
小程序中定义变量和函数和vue很类似,但有一点区别定义变量Page({ data: { number : 0 }});在data中,定义了一个属性number,值为0在wxml中使用这个number<view> {{number}}</view>现在增加一个功能,当点击view层时,number的值不断的累加。...原创 2020-03-25 14:58:31 · 163 阅读 · 0 评论 -
04.模块化与全局属性、全局函数调用
模块化通过module.exports和require实现。例子 :index.jsfunction sayHello(){ return 'hello';}module.exports = { "say": sayHello}a.jslet obj = require('./utils/index.js');console.log(obj.say());...原创 2020-03-25 12:04:17 · 265 阅读 · 0 评论 -
04.逻辑层注册
app.js App({ /** * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) */ onLaunch: function () { }, /** * 当小程序启动,或从后台进入前台显示,会触发 onShow */ onShow: function (options...原创 2020-03-25 11:44:29 · 149 阅读 · 0 评论 -
03.全局配置app.json 和 局部配置xx.json
{ "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "小...原创 2020-03-25 00:34:50 · 397 阅读 · 0 评论 -
02.小程序结构分析
基本结构一个最简单的小程序由app.json和index.wxml组成。下图是比较完整的demopages具体的页面目录app.js(文件名必须是app.js)全局jsapp.json (文件名必须是app.json)页面配置文件,每增加一个新的wxml,需要在这个页面配置app.wxss全局样式表(文件名必须是a...原创 2020-03-24 00:16:51 · 262 阅读 · 1 评论