微信小程序云开发之初体验

news/2024/7/20 2:22:46 标签: 小程序

首先安装开发者工具，在微信工具平台里找，稳定版下载微信开发者工具

1.创建项目

在这里插入图片描述
一开始是默认目录，在哪创建项目可以修稿项目名称和目录，填写自己的AppID
如果不填写可以使用测试号，测试号有一些功能无法使用

然后进入页面

2.项目结构

在这里插入图片描述

3.组件使用

组件使用：https://developers.weixin.qq.com/miniprogram/dev/component/

4.引入图片

直接引入图片，展示（在wxml页面引入）

<view class="box">
  <image src="http://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1591102782&t=28e7af605d3bf1a8d0c2ca7e0ddf42d7"></image>
</view>

动态展示在index.js 写入

data: {
    imgUrl:'http://t7.baidu.com/it/u=378254553,3884800361&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1591102634&t=b003d18cab8c4f254b4a2856ab7d2b90"></image>'
  }

在wxml页面展示

<image src="{{imgUrl}}"></image>

这样实现了简单的图片展示，但是图片会失真
scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
图片引入部分组件： https://developers.weixin.qq.com/miniprogram/dev/component/image.html

5.JS交互

给按钮添加点击事件

 <button type="primary" bindtap="changeImg" size="mini">change</button>

在js中添加事件
点击切换图片案例

changeImg(){
    this.setData({imgUrl:'http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1591102780&t=994672fdea236628b5a7636540cd9b03'})
  }

6.API

拍照
在html页面中加入

<button type="primary" bindtap="takePhoto" size="mini">拍照</button>
<camera device-position="back" flash="off" binderror="error" style="width:100%;height:100%"></camera>

在js页面中添加

takePhoto(){
    const cc =wx.createCameraContext()
    cc.takePhoto({
      success(){
        console.log('success')
      }
    })
  }

API详情：https://developers.weixin.qq.com/miniprogram/dev/api/

连接API 数据查看
在js页面中添加

onLoad(){
    wx.request({
      url: 'http://127.0.0.1:3000/cgi/post/getcirclepost',
      success:(res)=>{
        this.setData({circleList:res.data.data})
        console.log(res)
      }
    })
  }

在html页面添加

<view class="circle-list">
    <view class="circle-item" wx:for="{{circleList}}" wx:for-item="item">
      <image src="{{item.user.avatar}}"></image>
      <text>{{item.user.nickname}}</text>
    </view>
</view>