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

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

一、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-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.value
        this.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天前
|
小程序 Java 关系型数据库
weixin030英语学习交流平台小程序+ssm(文档+源码)_kaic
本文介绍了英语学习交流平台小程序的开发全过程,包括系统分析、设计与实现。该小程序基于Java的SSM框架进行后端管理开发,使用MySQL作为数据库,并借助微信开发者工具确保系统稳定性。小程序设有管理员和用户两个角色,功能涵盖个人中心、每日打卡、学习计划、论坛交流等,具有操作简单、界面清晰、功能齐全的特点。通过技术可行性、经济可行性和操作可行性分析,证明了系统的实用性和高效性,为英语学习者提供了一个便捷的交流平台。
|
1月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
349 12
|
4月前
|
小程序 前端开发 算法
|
5月前
|
JSON 数据可视化 小程序
uview/小程序可视化表单代码生成器文档
uview/小程序可视化表单代码生成器文档
77 0
|
5月前
|
小程序 数据可视化 开发工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
73 0
|
6月前
|
小程序 PHP
微信小程序给 thinkphp后端发送请求出现错误 Wrong number of segments 问题的解决 【踩坑记录】
本文记录了微信小程序向ThinkPHP后端发送请求时出现"Wrong number of segments"错误的解决方法。问题原因是小程序请求header中的token变量名写错,导致token未正确传递至后端。作者提供了详细的检查步骤和建议,包括验证URL路径、参数规范和路由配置的匹配,以确保请求能正确发送和处理。
|
7月前
|
小程序 安全
Fiddler抓取小程序后端请求导入AppScan扫描快捷方法
【8月更文挑战第26天】这是一种利用 Fiddler 捕获小程序后端请求并导入 AppScan 进行安全扫描的方法。首先安装配置 Fiddler 并设置手机代理,通过 Fiddler 捕获请求;接着导出这些请求为 .saz 文件,并在 AppScan 中导入此文件,配置扫描参数后启动扫描以检测安全漏洞。操作时需确保有合法授权并遵循相关法规。尽管不同版本软件操作细节可能有所不同,但整体流程类似。
253 1
|
7月前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
1113 65
|
7月前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
7月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试

热门文章

最新文章