一、wxml文档

<!-- index.wxml -->
<view><!-- 数据绑定 --><view><text>{{name}}</text><text>{{ages}}</text></view><!-- 列表渲染 --><view wx:for="{{user}}"><text>{{item['name']}}-{{item['ages']}}</text></view><!-- 条件渲染 --><view wx:if="{{name == 'lockdatav'}}"><text>{{name}}</text></view><view wx:else><text>Poleung</text></view>
</view>

Page({data: {name: "lockdatav",ages: "23",arrData: [1, 2, 3, 4, 6],user: [{name: '001',ages: 23}, {name: '002',ages: 25}]}
})

wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}
</view>

二、新建页面快捷方式

在app.json中，pages的默认为项目页面，第一个是默认的访问首页；在实际开发中，可以直接创建 "pages/btn/btn",保存，将自动创建对应的组件目录。

三、微信小程序引入weui

weui组件库效果：https://weui.io/
下载weui：进入GitHub https://github.com/weui/weui-wxss/ 进入下载页面，点击下载按钮。
复制weui-wxss-master\dist\style\weui.wxss至项目根目录
在app.wxss中引入@import 'weui.wxss';
实时查看weui源码：打开“微信开发者工具”，选择“小程序” > “导入项目” > 名称，目录选择dist文件夹，填写AppID。点击“导入”按钮，开始导入即可

四、双向数据绑定

微信小程序提交表单多个input输入框，通过一个bindinput方法实现双向数据绑定。

1.wxml渲染层

<view class="page-body"><view class="page-section"><view class="weui-cells__title">品名</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell weui-cell_input"><input class="content" value="{{baseInfo.goodsName}}" bindinput="bindKeyInput" data-params="goodsName"></input></view></view></view><view class="page-section"><view class="weui-cells__title">规格</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell weui-cell_input"><input class="weui-input" value="{{baseInfo.spec}}" bindinput="bindKeyInput" data-params="spec"></input></view></view></view>
</view>
<view class="weui-cells__title" wx:if="{{baseInfo.goodsName != null}}">当前了录入信息：{{baseInfo.goodsName}} - {{baseInfo.spec}}
</view>

2.js逻辑层

在bindinput方法里通过e.currentTarget.dataset.params可字段键名，通过e.detail.value获取字段值。

    data: {baseInfo: {}},bindKeyInput(e) {this.data.baseInfo[`${e.currentTarget.dataset.params}`] = e.detail.valuethis.setData({baseInfo: this.data.baseInfo})//console.log(`baseInfo对象：`, this.data.baseInfo)},

提交表单到后端

post和get提交方式的区别

public function putUsers(){global $db, $res;dbc();@$user_title = $_POST['user_title'];@$user_name = $_POST['user_name'];@$user_phone = $_POST['user_phone'];@$user_time = time();if ($user_title == "" || $user_name == "" || $user_phone == "") {$res['code'] = 1;$res["msg"] = '非法访问参数';die(json_encode_lockdata($res));}$sql = " INSERT INTO " . $db->table('user') . " (user_name,user_phone,user_title,user_time) VALUES ('" . $user_name . "','" . $user_phone . "','" . $user_title . "','" . $user_time . "')";$db->query($sql);$res['code'] = 0;$res["msg"] = 'OK';die(json_encode_lockdata($res));}

五、微信小程序跳转到H5

<web-view src="https://test.com"></web-view>

@漏刻有时

微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)相关推荐

微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
百度经纬度采集一.H5页面开发 1.手机端外部JS库 2.地图容器 3.数据表单 4.地图加载 5.回调封装函数+自动定位二.微信小程序核心代码 1.lnglat.wxml 2.lnglat.js ...
微信小程序实现PDF转Word文档
效果查看 1.打开微信小程序项目,并创建toword模块 1.两个主要文件,toword.wxml与toword.js.toword.wxml文件内容 <view class="vie ...
微信小程序开发指南，接口文档，工具下载使用
相信前天,从事互联网行业人的朋友圈给刷爆了,前微信公众平台开始陆续对外发送小程序内测邀请,而小程序即被外界广为关注的微信"应用号". 小程序的推出也并非一蹴而就,早在2016年1月 ...
微信小程序使用vant weapp的van-field，输入有内容时，表单校验数据一直为空的问题
在微信小程序中使用了van-field来输入用户的手机号码,并且实现实时校验手机号码的正确性,具体表现如下主要原因是不支持数据双向绑定:当输入内容发生改变得时候,需要通过bind:change来将数 ...
微信小程序学习2：开发工具快速创建页面（pages）的四个文件(.js，.json，.wxml， .wxss)
微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss) [1]首先在pages文件夹下创建一个页面文件夹,比如我打算创建个人中心,我创建一个ho ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序开发实录——每日速递
微信小程序开发实录--每日速递选题简介工具使用心得选题简介新闻版块创建项目数据来源(知乎日报) 基本页编写详情页编写数据获取 WxParse 样式表转换转换方法样式文件的引用天气 ...
微信小程序学习之路（一）
微信小程序学习之路(一) 1.前言 2.准备工作 (1).IDE的选择 (2).微信小程序的文件说明 (3)开发者用户注册 3.编写 (1).新建项目 (2).代码的编写 3.代码的发布以及审核 1. ...
微信小程序学习：（五）swiper塌陷问题解决
微信小程序学习:(五)swiper塌陷问题解决 github地址: https://github.com/leoricding/- (一)问题分析需求:实现tab切换,内容切换:内容切换,tab也切 ...

微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)

微信小程序学习实录