如何实现微信小程序动态表单

的时候应该如下图所示:

1text-input文本框输入组件

2text-picker选框组件（性别，分组选框）

3text-time 时间组件

4image-upload 文件上传组件

5region-picker 省市县

微信官方behaviors文档

项目github地址

微信小程序中支持省市区地址级联吗？

微信小程序中的地址级联最多支持到几级？

今天，我们就来看看，微信小程序中的地址级联的使用，以及一些坑…希望大家看完之后能避免踩坑啊。

省市区级联

小程序中，picker组件是个很棒的组件，可以干好多事儿，微信官方对它的解释是：

从底部d起的滚动选择器。

那么，它都支持哪些功能呢？

普通选择器(selector)

多列选择器(multiSelector)

时间选择器(time)

日期选择器(date)

省市区选择器(region)

属性列表参考如图所示：

功能：

年月日时分秒，固定选择范围

效果：

自定义组件实现：

utils/datePickerjs

定义组件components/datePicker/datePickerjs

components/datePicker/datePickerwxml

components/datePicker/datePickerwxss

使用datePicker组件

indexjson

indexwxml

indexjs

12月16日，微信正式发布了WeUIjs动态视觉组件库。WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，可以让用户的使用感知更加统一。WeUIjs动态视觉组件库包含了button、cell、dialog、progress、toast、article、actionsheet、icon等各式元素。

一、weuijs是什么？

weuijs是WeUI的轻量级JS封装，不需要依赖其它库，GZIP后仅有90 KB。

二、weuijs包含哪些组件？

actionsheet

alert

confirm

dialog

form

gallery

loading

picker

searchbar

slider

tab

toast

toptips

uploader

三、使用方式：

Github：>

安卓里面的时间控件与日期控件都是分开的，如果要同时使用的话用户体验度那肯定不好，整合了安卓中的时间与日期控件，可以同时显示出来方便用户进行选择，使用时只需要将文件导入项目中，再需要用到的地方使用如下代码

环境搭建就不讲了，直接说开发。

小闹钟程序开发中的要点就是：

1、时间选择对话框（TimePicker）

2、获取闹钟管理器并对其进行设置

3、注册广播接收器

掌握了这两点，写程序就很简单了。

1、新建android项目:Alarm，sdk版本选择22，Package name：comlqlactivity，Main Activity：Alarm

2、编写界面：直接修改layout中的mainxml文件，代码如下：

Xml代码

<xml version="10" encoding="utf-8">

<LinearLayout xmlns:android=">

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center_vertical"

>

<Button

android:id="@+id/timeBtn"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/time"

android:textSize="20sp"

/>

<Button

android:id="@+id/cancelAlarmBtn"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/cancelAlarm"

/>

</LinearLayout>

界面的效果如下：

3、修改Alarmjava这个activity，在该Activity中需要做这样几件事：

获取界面上的两个按钮组件，并给其绑定事件监听器

第一个时间按钮，点击后，显示时间选择对话框（TimePicker），供选择小时和分钟，并设置闹钟

第二个按钮，点击之后需要当前设定的闹钟

比较难写的代码就是闹钟设置：

//设置时间

Java代码  

timeBtnsetOnClickListener(new ButtonOnClickListener(){

@Override

public void onClick(View arg0) {

Logd(TAG, "click the time button to set time");

calendarsetTimeInMillis(SystemcurrentTimeMillis());

new TimePickerDialog(Alarmthis,new TimePickerDialogOnTimeSetListener() {

@Override

public void onTimeSet(TimePicker arg0, int h, int m) {

//更新按钮上的时间

timeBtnsetText(formatTime(h,m));

//设置日历的时间，主要是让日历的年月日和当前同步

calendarsetTimeInMillis(SystemcurrentTimeMillis());

//设置日历的小时和分钟

calendarset(CalendarHOUR_OF_DAY, h);

calendarset(CalendarMINUTE, m);

//将秒和毫秒设置为0

calendarset(CalendarSECOND, 0);

calendarset(CalendarMILLISECOND, 0);

//建立Intent和PendingIntent来调用闹钟管理器

Intent intent = new Intent(Alarmthis,AlarmReceiverclass);

PendingIntent pendingIntent = PendingIntentgetBroadcast(Alarmthis, 0, intent, 0);

//获取闹钟管理器

AlarmManager alarmManager = (AlarmManager)getSystemService(ALARM_SERVICE);

//设置闹钟

alarmManagerset(AlarmManagerRTC_WAKEUP, calendargetTimeInMillis(), pendingIntent);

alarmManagersetRepeating(AlarmManagerRTC_WAKEUP, calendargetTimeInMillis(), 101000, pendingIntent);

ToastmakeText(Alarmthis, "设置闹钟的时间为："+StringvalueOf(h)+":"+StringvalueOf(m), ToastLENGTH_SHORT)show();

Logd(TAG, "set the time to "+formatTime(h,m));

}

},calendarget(CalendarHOUR_OF_DAY),calendarget(CalendarMINUTE),true)show();

}

});

代码里面有注释，这里就不多解释了，其中new TimePickerDialog为创建时间选择对话框。为了能够看到效果，我给闹钟添加了重复提醒：alarmManagersetRepeating(AlarmManagerRTC_WAKEUP, calendargetTimeInMillis(), 101000, pendingIntent);。

还要为取消闹钟按钮添加事件监听器：

Java代码  

//取消闹钟按钮事件监听

final Button cancelAlarmBtn = (Button)findViewById(RidcancelAlarmBtn);

cancelAlarmBtnsetOnClickListener(new ButtonOnClickListener(){

@Override

public void onClick(View arg0) {

Intent intent = new Intent(Alarmthis,AlarmReceiverclass);

PendingIntent pendingIntent = PendingIntentgetBroadcast(Alarmthis, 0, intent, 0);

//获取闹钟管理器

AlarmManager alarmManager = (AlarmManager)getSystemService(ALARM_SERVICE);

alarmManagercancel(pendingIntent);

ToastmakeText(Alarmthis, "闹钟已经取消！", ToastLENGTH_SHORT)show();

}

});

在点击取消闹钟按钮时，取消之前设置的闹钟，核心代码就4行。

4、编写广播接收器，用来接收闹钟的广播事件，然后进行相关处理，

Java代码  

public class AlarmReceiver extends BroadcastReceiver {

/ (non-Javadoc)

 @see androidcontentBroadcastReceiver#onReceive(androidcontentContext, androidcontentIntent)

/

@Override

public void onReceive(Context arg0, Intent data) {

Logd(AlarmTAG, "the time is up,start the alarm");

ToastmakeText(arg0, "闹钟时间到了！", ToastLENGTH_SHORT)show();

}

}

这个代码就很简单了，主要是要继 承 BroadcastReceiver 这个类，然后重写onRecive方法。onRecive方法在闹钟的时间达到之后会执行，在这里我们可以做自己的事情，比如启动某个程序，或者播放铃声，我这里就是简单的提示一下，使用的是Toast。

5、在android的AndroidManifestxml文件中注册广播接收器：

<manifest xmlns:android=">

Xml代码

package="comqlactivity"

android:versionCode="1"

android:versionName="10">

<application android:icon="@drawable/icon" android:label="@string/app_name">

<receiver android:name="AlarmReceiver" android:process=":remote" />

<activity android:name="Alarm"

android:label="@string/app_name">

<intent-filter>

<action android:name="androidintentactionMAIN" />

<category android:name="androidintentcategoryLAUNCHER" />

</intent-filter>

</activity>

</application>

<uses-sdk android:minSdkVersion="8" />

</manifest>

核心的配置为<receiver android:name="AlarmReceiver" android:process=":remote" />，这也是闹钟程序的关键，如果不做这个配置，那么时间到了之后，闹钟将不会提示。

接下来就是到模拟器上测试，运行截图如上图。程序源代码见附件。

格式调整

界面相关

分割线

标签

一、视图容器(View Container)：

view 视图容器

scroll-view 可滚动视图容器

swiper 可滑动的视图容器

二、基础内容(Basic Content)

icon 图标

text 文字

progress 进度条

三、表单组件(Form)

button 按钮

form 表单

input 输入框

checkbox 多项选择器

radio 单项选择器

picker 列表选择器

slider 滑动选择器

switch 开关选择器

label 标签

四、 *** 作反馈组件(Interaction)

action-sheet 上拉菜单

modal 模态d窗

progress 进度条

toast 短通知

五、导航(Navigation)

navigator 应用内跳转

六、多媒体(Media)

audio 音频

image

video 视频

七、地图(Map)

map 地图

八、画布(Canvas)

canvas 画布

1基础组件：

什么是组件：

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

，属性

用来修饰这个组件，内容

在两个标签之内。</li>

</ul>

2属性类型

<ul>

<li>Boolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true

，只有组件上没有写该属性时，属性值才为false

。如果属性值为变量，变量的值会被转换为Boolean类型</li>

<li>Number 数字 1

, 25</li>

<li>String 字符串 "string"</li>

<li>Array 数组 [ 1, "string" ] </li>

<li>Object 对象 { key: value } </li>

<li>EventHandler 事件处理函数名 "handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any 任意属性 </li>

</ul>

3共同属性类型

id , class , style , hidden , data- , bind / catch

4特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5组件列表

基础组件分为以下八大类：

视图容器(View Container)：

view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：

icon 图标, text 文字, progress 进度条

表单(Form)：

button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签

*** 作反馈（Interaction）

action-sheet 上拉菜单

modal 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image ， video 视频

地图

map 地图

画布Canvas

canvas 画布

flex: vt折曲，使收缩； vi玩去，收缩

以上就是关于如何实现微信小程序动态表单全部的内容，包括:如何实现微信小程序动态表单、微信小程序代码怎么实现四个相等区域、微信小程序自定义picker年月日时分秒选择器组件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！