文章目录

1. 页面跳转
- 方法1：绑定事件进行跳转(常用)
- 方法2：通过标签进行跳转
2.数据绑定
- 2.1 基本显示
- 2.2 数据更新
3. 获取用户信息
4.获取用户位置信息
5. for指令
6.上传图片

1. 页面跳转

方法1：绑定事件进行跳转(常用)

wxml页面

<view bindtap="clickMe" data-nid="123">绑定事件跳转</view>
<!-->
bindtap进行事件绑定
在页面跳转的过程中，如果需要携带参数，格式为（data-参数名称）= 参数值
<-->

js页面

clickMe : function(e) {console.log(e); /*查看入参值*/var nid = e.target.dataset.nid;/**微信自身API，进行跳转，参数需要进行自己拼接*/wx.navigateTo({url: '/pages/skip/skip?nid=' + nid,})
}

在跳转完成后，在跳转页面中的onLoad函数中获取参数

/**pages/skip/skip.js* 生命周期函数--监听页面加载*/
onLoad: function (options) {console.log(options);this.setData({nid : options.nid,})
}

注意事项：只能跳转到非tabbar的页面。

方法2：通过标签进行跳转

wxml页面

<navigator url="/pages/skip/skip?nid=666">标签跳转</navigator>
<!-->显式跳转页面<-->

2.数据绑定

在html页面中，这样content就与name进行了绑定

<div id="content"></div>
<script>var name = "李业迟到";$('#content').val(name);
</script>

在vue.js中，message的值就是js中data中message的值，在微信小程序中，自然也支持这样的写法。

<div id="app"><div>{{message}}</div>
</div>
<script>new Vue({el: '#app',data: {message: '漠殇'}})
</script>

2.1 基本显示

wxml

<view>数据1：{{message}}</view>

Page({/*** 页面的初始数据*/data: {message:"1001001",}
)}

结果显示就是

数据1：1001001

2.2 数据更新

在微信小程序中，默认绑定的数据都存在于本页面的js文件的data中，而且我们每次对data中的值进行替换时，都希望页面上的值也跟着替换。

html

<view>数据：{{message}}</view>
<button bindtap="changeData">点击修改数据</button>

Page({data: {message:"1001001",},changeData:function(){// 修改数据this.setData({ message: "漠殇"});}
})

我们不采用在data中直接赋值的方式，那样即使data中的数据变化了，页面的数据也不会进行变换。

我们修改数据使用this.setData({})

3. 获取用户信息

在微信中，想要获取用户信息，就需要调用微信的API，获取用户信息的API为wx.getUserProfile,我们再使用数据绑定的知识，写出下面的页面。

html

<view>用户名：{{userName}}</view>
<view>头像<image src= "{{imgurl}}" style="width: 100rpx; height: 100rpx;"></image>
</view>
<!-->用户名和头像都存在默认值，我们将其值放在js页面的data中，与之绑定，data的值发生变化，那么页面显示的用户名和头像也随着变化<!--><button bindtap="getUserProfile">获取用户信息</button>
<!-->绑定事件<!-->

Page({/*** 页面的初始数据*/data: {userName : "",imgurl: "/static/default.png",location: "",},getUserProfile: function() {/*微信获取用户信息的API*/wx.getUserProfile({desc: '学习交流', /*弹窗显示*/success: (res) => {console.log(res);this.setData({userName : res.userInfo.nickName,imgurl: res.userInfo.avatarUrl,})}})},
}）
/*
*获取用户信息的操作都需要用户同意
*/

4.获取用户位置信息

与获取用户信息一样，需要调用wx.chooseLocationAPI

html

<view>当前位置：{{location}}</view>
<button bindtap="getLocation">获取位置</button>

getLocation: function() {wx.chooseLocation({success : (res) => {console.log(res);this.setData({location: res.address,})}})
},

5. for指令

在微信小程序中，也存在着for循环，用法为wx:for={{遍历的列表}}

其中下标默认是index，值默认是item，用法和Java的增强for循环有点类似。

如果不想使用默认的下标和默认的值的名称，可以使用

" wx:for-index="下标" wx:for-item="值"

js页面的值

data: {datalist:["王城罗", "王鑫龙", "王佳琪", "孟凡", "李超平", "高凝"],userInfo: {name: "237",age: 3,}
}

wxml

<view><view wx:for="{{datalist}}">{{index}} -- {{item}}</view><view wx:for="{{datalist}}" wx:for-index="idx" wx:for-item="x">{{idx}} -- {{x}}</view>
</view><view>{{userInfo.name}}{{userInfo.age}}
</view><view><view wx:for="{{userInfo}}">{{index}} -- {{item}}</view>
</view>

结果

6.上传图片

API:wx.chooseImage

wxml

<view bindtap="uploadImage">请上传图片</view>
<view><image wx:for="{{imageList}}" src="{{item}}" style="width: 200rpx; height: 200rpx;"></image>
</view>
<!-->遍历每一张图片<-->

Page({/*** 页面的初始数据*/data: {imageList: ["/static/hh.jpg", "/static/hh.jpg"],},uploadImage: function() {wx.chooseImage({count: 9, /*上传图片最大数量*/sizeType: ['original', 'compressed'],/*图片质量：原图和压缩图*/sourceType: ['album', 'camera'], /*获取方式：相册or相机*/success: (res) => {console.log(res)this.setData({imageList: this.data.imageList.concat(res.tempFilePaths), /*追加图片使用concat，不影响之前和追加的内容，只是将两者的内容进行了拼接*/})},})},
})

微信小程序——day02相关推荐

微信小程序—day02
全局配置在app.json中,对小程序进行全局配置.官方文档 tabBar是对底部/顶部导航栏的配置,图片的icon 大小限制为40kb,建议尺寸为 81px * 81px 去阿里矢量图网站,找到图 ...
微信小程序基础学习笔记Day02
学习目标:微信小程序基础Day02 今日目标: 能够使用 WXML 模板语法渲染页面结构能够使用 WXSS 样式美化页面结构能够使用 app.json 对小程序进行全局性配置能够使用 page. ...
微信小程序老男孩课程（day1-2.5 到django不会了..要学Pythone）
Day1 微信小程序 1 .什么是微信小程序如何开发微信小程序 - 小程序:微信开发的语言 (前端html.css.js) API:restful接口(Phthon +django+drf框架) p ...
Python3 - 三天学会微信小程序（Python后端研习）
文章目录一.day01微信小程序 1. 问题 2. 环境的搭建 2.1 Python环境 2.2 小程序环境 2.2.1 申请一个微信公众平台 2.2.2 保存自己的appid 2.2.3 下载开发 ...
10分钟入门 - 微信小程序开发
注册微信小程序如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 "立即注册" 按钮进行注册.注册的账号类型可以是订阅号.服务号.小程序以及企业微信,我们选择 &qu ...
开启微信小程序的学习窗口(第一课)
第一个问题什么是微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫 ...
微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现下面看一个简单的demo 传递数据要传递界面 wxml  <view class= ...
微信小程序web-view使用
web-view 可以是微信小程序支持嵌套网页例如想嵌套百度可以这样 <view ><web-view src="https://www.baidu.com/s?ie= ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...

微信小程序——day02

文章目录

1. 页面跳转

方法1：绑定事件进行跳转(常用)

方法2：通过标签进行跳转

2.数据绑定

2.1 基本显示

2.2 数据更新

3. 获取用户信息

4.获取用户位置信息

5. for指令

6.上传图片

微信小程序——day02相关推荐

最新文章

热门文章