注册小程序账号
- 注册账号
- 安装微信开发者工具
- 新建项目
新建项目
项目初始化的文件
wx:for 列表渲染
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
wx.request 网络请求
wx.request({
url:'http://192.168.0.7:3000/cgi/post/getcirclepost',
success:(res)=>{
this.setData({circleList:res.data.data})
}
})
url:服务器接口地址
success:请求成功回调的参数
this.setData({})获取data中定义的变量
wx.createCameraContext() 相机组件
在wxml 中创建 camera
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
在js中
const cc = wx.createCameraContext()
cc.takePhoto({
success: (res) => {
this.setData({
src: res.tempImagePath
})
image 图片
<image src="{{circleList[0].user.avatar}}" class="userinfo-avatar"></image>
src:图片路径
需要动态设置路径时使用{{}}来包含(相当于插值表达式)
mode:默认值scaleToFill
scaleToFill :缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit: 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。