小程序开发组件的使用

注册小程序账号

1. 注册账号
2. 安装微信开发者工具
3. 新建项目

新建项目

项目初始化的文件

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： 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。