系列文章目录
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
1.默认加载的页需要将其调整到pages中页面列表的第一个
2.
布局组件和图片组件的使用
3.③弹性布局
4. ④通过wx:if属性来控制不同的视图显示
5.
小程序如果需要前台wxml界面和js进行交互,形成动态效果时,需要通过事件驱动
所有微信小程序的事件前面都会有一个关键字bind
提示:以下是本篇文章正文内容,下面案例可供参考
一、.默认加载的页需要将其调整到pages中页面列表的第一个。
代码如下(示例):
"pages": [
"pages/login/login",
"pages/index/index",
"pages/news/news",
"pages/case/case",
"pages/ul/ul"
二、布局组件和图片组件的使用
view组件:等价于之前的div容器,是一个块级元素。可以设置宽和高
image组件:显示图片的组件,src属性是当前的图片路径 mode属性是当前图片的压缩方式
代码如下(示例):
<view >
<image src="" mode="" class=""></image>
</view>
三.布局样式
代码如下(示例):
display: flex;/*弹性布局*/
flex-direction: row;/*弹性布局的方向 默认是水平方向*/
justify-content: space-between;/*对齐方式*/
border-bottom: 2rpx solid gray;/*边框 像素 线型 颜色*/
align-items:center ; /*交叉轴的终点对齐*/
line-height: 100rpx;/* 行间距 控制某个区域中行与行之间的距离*/
四.通过wx:if属性来控制不同的视图显示
代码演示:
<view wx:if="{{loginMide}}">
<view class="wx">
<image src="/image/chat.png" mode="heightFix"class="chatimg"></image>
</view>
<view class="chattext">
<text>申请获取一下权限</text>
<text>获取你的公开信息(昵称,头像等)</text>
<button type="primary">微信授权登录</button>
</view>
</view>
<!--账号 密码 登录 -->
<view class="formlogin" wx:else>
<form bindsubmit="uplogin">
<view>账号</view>
<view>
<input type="text" placeholder="请输入账号" name="username" />
</view>
<view>密码</view>
<view>
<input type="password" placeholder="请输入密码" name="pwd"/>
</view>
<view>
<button type="primary" form-type="">账号登陆</button>
</view>
</form>
</view>
五.
小程序如果需要前台wxml界面和js进行交互,形成动态效果时,需要通过事件驱动
所有微信小程序的事件前面都会有一个关键字bind
wxml代码演示:
<!--头部样式-->
<view class="header">
<image src="/image/logo.jpg" mode="heightFix" class="imgloge"></image>
<image src="/image/tel.jpg" mode="heightFix" class="imgtel"></image>
</view>
<!--微信授权登录区域开始-->
<view wx:if="{{loginMide}}">
<view class="wx">
<image src="/image/chat.png" mode="heightFix"class="chatimg"></image>
</view>
<view class="chattext">
<text>申请获取一下权限</text>
<text>获取你的公开信息(昵称,头像等)</text>
<button type="primary">微信授权登录</button>
</view>
</view>
<!--账号 密码 登录 -->
<view class="formlogin" wx:else>
<form bindsubmit="uplogin">
<view>账号</view>
<view>
<input type="text" placeholder="请输入账号" name="username" />
</view>
<view>密码</view>
<view>
<input type="password" placeholder="请输入密码" name="pwd"/>
</view>
<view>
<button type="primary" form-type="">账号登陆</button>
</view>
</form>
</view>
<!-- 登录区域切换-->
<view class="loginxz">
<radio-group bindchange="loginchange">
<radio checked="true" value="0">微信授权</radio>
<radio class="userLogin" value="1">账号登录</radio>
</radio-group>
</view>
js代码演示:
data: {
loginMide:true
},
/*function要做的事情 方法定义的语法
方法的e代表当前选中的控件
*/
loginchange:function(e){
var rdvalue=e.detail.value;
//如果选择的是微信授权登录
if(rdvalue==0){
//loginMide的值为true//在小程序中要修改初始化date中的值使用//this代表当前页的数据 set设置的意思 重新设置date的值
this.setData({
loginMide:true
})
}
//如果选择的是账号登录
else{
//loginMide的值为false
this.setData({
loginMide:false
})
}
},
uplogin:function(e){
//获取用户名和密码
var username=e.detail.value.username;
var pwd=e.detail.value.pwd;
//判断账户sxl 密码123
if(username=="sxl" && pwd=="123"){
wx.redirectTo({
url: '/pages/ul/ul',
})
}
else{
//否则提示账号密码错误
wx.showToast({
title: '账号或密码错误',
icon:"error"
})
}
}