betway必威-betway必威官方网站
做最好的网站

性别选择,一个有局限的类似React

  • 微信小程序进阶开发-checkbox 运用、form 表单取值和提交
  • 微信小程序进阶开发-wx:for 循环列表
  • 微信小程序进阶开发-wx:key 高级列表循环
  • 微信小程序进阶开发-顶部菜单、利用 data 属性实现菜单当前项
  • 微信小程序进阶开发-下拉刷新
  • 微信小程序进阶开发-上滑加载更多
  • 微信小程序进阶开发-picker 实现选择框、时间选择、日期选择、性别选择……
  • 微信小程序进阶开发-模态输入对话框

先先抛出结论:微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性。(结论是基于微信小程序的示例代码做的解读,可能存在谬误本文针对微信小程序的示例代码进行分析,告诉大家: 1、微信小程序到底提供了什么? 2、开发微信小程序方便么? 3、微信小程序具体适用场景? 4、最后还自作主张的说了点对于微信小程序的个人观点。微信小程序都提供了什么?微信小程序主要为我们提供了两部分东西:底层API 和 组件,不仅如此,微信小程序还引入新的文件格式。引入新的文件格式。微信小程序并不是传统意义的H5页面,微信定义了新的文件格式,然后对这些文件做编译解析,所以微信小程序是原生应用!是基于微信的原生应用!微信正式尝试做一个OS!


图片 1上图是一个wx-action-sheet组件,文件应用了新的后缀。其中wxml功能和HTML类似,wxss功能和CSS类似,JS包含组件逻辑。这点是不是和RN/weex很像?微信提供了一套基础组件库微信为微信小程序提供了一套基础组件库,可以满足开发的基础开发需求,从而实现简单的快速开发,至于这些基础组件支持多大程度的自定义,以及能否满足实际项目的需求,留给后续开发者去体验吧。基础组件库主要分为四类:控件(controller)主要包括:action-sheet/ button/ searchbar/ modal/ navigator/ drawer表单主要包括:checkbox/ radio/ form,selector/ switch/ slider/ input/ label/ picker媒体主要包括:image/ audio/ video视图主要包括:progress/ toast/ scroll-view/ text/ view/ mask/ icon/ spinner/ swiper/ slide-tab

picker 实现从底部弹出滚动选择器,有个属性叫 mode,只有三个值:

恩,这些组件不用介绍大家也都知道大概是什么功能了,几乎是每个UI组件库都必备的。以后大家应该都基于这个组件库去开发具体的产品,和RN/weex不同的是,微信小程序多半只能基于微信提供的组件进行个性化封装了,而不能基于系统组件进行个性化封装,原因很简单,因为微信就是一个“系统”。

  • mode="selector"
  • mode="time"
  • mode="date"

图片 2

所以要实现地区选择、性别选择……,就用 mode="selector",然后自己填充数据。

我们挑一个稍微复杂的picker组件示例来分析分析:// wx-picker.wxml文件<view > <view > <text >picker</text> <text >选择器</text> </view> <view > <view > <view >地区选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view > 当前选择:{{array[index]}} </view> </picker> </view> <view > <view >日期选择器</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view > 当前选择: {{date}} </view> </picker> </view> </view></view>

我们倒着介绍,先介绍 mode="date"

是的,所有的标签都是自定义标签,进一步佐证了微信小程序是原生应用,组件使用很简单,所以很适合快速开发。// wx-picker.js 文件Page({ data: { array:["中国","美国","巴西","日本"], index:0, date:"2016-09-01" }, bindPickerChange: function { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, bindDateChange:function{ this.setData({ date:e.detail.value }) }, bindTimeChange:function{ this.setData({ time:e.detail.time }) }})

<picker mode="date" start="2017-1-1" end="2017-4-1" value="2017-2-1" fields="month"> <view>点我弹出选择器</view> </picker>

也很清晰,通过this.setData来设置属性,实现action-sheet的显示与隐藏切换。React的感觉,连API都很像。// wx-picker.wxss.picker{ padding: 13px; background-color: #FFFFFF;}

fields 可选择值:year(细化到年)、month(细化到月)、day(细化到日)

可以重新设置微信小程序的组件样式,和CSS很相似,轻量简洁。底层API没有提供底层API的基础组件库都是流氓库,有了底层API才能开发真正的原生应用,才能做更多丰富的功能。其中底层API包括:animation/ backgronud-audio/ canvas/ download-file/ file/ get-location/ get-network-type/ get-system-info/ get-user-info/ image/ login/ navigation-bar-loading/ navigator/ on-accelerometer-change/ on-compass-change/ open-location/ pull-down-refresh/ request/ request-payment/ set-navigation-bar-title/ storage/ upload-file/ voice/web-socket

效果:

从名字也能看出大概,提供了比较完整的API,能够开发更丰富的功能和程序。我们仍然挑一个稍微复杂点的图片相关的API使用示例来分析分析:// image.wxml文件<import src="../common/header.wxml" /><import src="../common/footer.wxml" /><view > <template is="header" data="{{title: 'choose/previewImage'}}"/> <view > <view > <form bindsubmit="openLocation"> <view > <picker range="{{sourceType}}" bindchange="sourceTypeChange" value="{{sourceTypeIndex}}"> <view > <view >图片来源</view> <view >{{sourceType[sourceTypeIndex]}}</view> </view> </picker> <picker range="{{sizeType}}" bindchange="sizeTypeChange" value="{{sizeTypeIndex}}"> <view > <view >图片质量</view> <view >{{sizeType[sizeTypeIndex]}}</view> </view> </picker> <picker range="{{count}}" bindchange="countChange" value="{{countIndex}}"> <view style="border-bottom: none;"> <view >数量限制</view> <view >{{count[countIndex]}}</view> </view> </picker> </view> <view > <text >请选择图片</text> <view > <block wx:for-items="{{imageList}}" wx:for-item="image"> <image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image> </block> <image src="/image/plus.png" bindtap="chooseImage"></image> </view> </view> </form> </view> </view> <template is="footer" /></view>

图片 3

简单清晰wxml,居然让选择图片并预览实现起来这么简单。并且可以通过简单的template语法来引入其他wxml文件。// image.js 文件var sourceType = [ ['camera'], ['album'], ['camera', 'album'] ]var sizeType = [ ['compressed'], ['original'], ['compressed', 'original'] ]Page({ data: { sourceTypeIndex: 0, sourceType: ['拍照', '相册', '拍照或相册'], sizeTypeIndex: 0, sizeType: ['压缩', '原图', '压缩或原图'], countIndex: 0, count: [1, 2, 3, 4, 5, 6, 7, 8, 9] }, sourceTypeChange: function { this.setData({ sourceTypeIndex: e.detail.value }) }, sizeTypeChange: function { this.setData({ sizeTypeIndex: e.detail.value }) }, countChange: function { this.setData({ countIndex: e.detail.value }) }, chooseImage: function () { var that = this wx.chooseImage({ sourceType: sourceType[this.data.sourceTypeIndex], sizeType: sizeType[this.data.sizeTypeIndex], count: this.data.count[this.data.countIndex], success: function { console.log that.setData({ imageList: res.tempFilePaths }) } }) }, previewImage: function { var current = e.target.dataset.src wx.previewImage({ current: current, urls: this.data.imageList }) }})

注意:“微信web开发者工具”在这里有个 BUG,上面我们指定的是 2017 年,但列表显示的是 2018 年。这个 BUG 只存在于“微信web开发者工具”,在手机微信上不存在这个 BUG。

因为微信对这个API已经封装得很好了,所以使用起来只需要传入几个参数,绑定一下回调函数即可。// image.css 文件.images-wrapper { padding: 20rpx; background-color: #fff; margin-top: 20rpx;}.images-wrapper-text { font-size: 28rpx;}.images-list { display: flex; margin-top: 20rpx; flex-wrap: wrap;}.images-image { width: 150rpx; height: 150rpx; margin: 10rpx;}.images-image-plus { border: 1px solid #999;}

绑定事件:

同样,样式通过类似CSS的语法,从上面的rpx单位可以看出,这不是真正的CSS,我猜测是CSS的子集,类似RN。开发微信小程序方便么?微信小程序的开发目录结构WX的开发目录结构也很清晰简单。

鉴于上面说的 BUG,为了测试方便,我们将 end 改到 2018 年。

图片 4入口文件就是最外层的app.js,app.json,app.wxss。app.js提供了入口文件的一些初始化和绑定。app.json提供了项目的结构和一些项目配置,微信之所以采用app.json的模式声明项目需要加载的页面和组件,应该是为了方便实现云端编译打包然后下发到微信吧。app.wxss就是样式啦。page目录放你需要实现具体功能的页面。util存放项目需要用到的一些工具函数。// app.json{ "pages": [ "page/component/component-pages/wx-picker/wx-picker", "page/API/image/image" ], "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "小程序演示", "navigationBarBackgroundColor": "#fbf9fe", "backgroundColor": "#fbf9fe" }, "tabBar": { "color": "#dddddd", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "page/component/index", "iconPath": "image/wechat.png", "selectedIconPath": "image/wechatHL.png", "text": "组件" }, { "pagePath": "page/API/index/index", "iconPath": "image/wechat.png", "selectedIconPath": "image/wechatHL.png", "text": "接口" }] }, "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "debug": true}

本文由betway必威发布于编程开发,转载请注明出处:性别选择,一个有局限的类似React

TAG标签: betway必威
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。