微信小程序开发实践

最新推荐文章于 2024-06-18 21:21:59 发布

彭世瑜

最新推荐文章于 2024-06-18 21:21:59 发布

阅读量1.4k

点赞数

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/106039337

版权

资源

视频
https://www.imooc.com/learn/1121

账号注册
https://mp.weixin.qq.com/wxopen/waregister?action=step1

开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

开发文档
https://developers.weixin.qq.com/miniprogram/dev/framework/

1、项目文件

json 配置
wxml 模板
wxss 样式
js 脚本逻辑

2、json 配置

project.config.json 项目配置
app.json 全局配置
page.json 页面配置

3、wxml 模板

标签：view
数据绑定：
动态数据 page.data
Mustache 语法
变量：{{key}}
循环：wx:for
条件：wx:if

eg:

// pages/index/index.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    name: "Tom",
    arr: ["cat", "dog"],
    isLogin: true,
  },
});

<!--pages/index/index.wxml-->

<!-- 变量 -->
<view>{{name}}</view>

<!-- 列表 -->
<view wx:for="{{arr}}" wx:key="{{index}}">
  {{index}} {{item}}
</view>

<!-- 条件 -->
<view wx:if="{{isLogin}}">已登录</view>
<view wx:else>请登录</view>

4、wxss 样式

responsive pixel 宽度以 750rpx 为标准，以 iphone6 屏幕为测试标准

/* pages/index/index.wxss */
@import "../../style/guide.wxss";

.box {
  width: 200rpx;
  height: 200rpx;
  background-color: #eeeeee;
}

第三方样式库

weui
iview weapp
vant weapp

5、js 脚本逻辑

<!--pages/index/index.wxml-->

<view>{{count}}</view>
<button bindtap="handleButtonTap" data-id="666" size="mini">点击</button>

// pages/index/index.js

Page({
  handleButtonTap: function (event) {
    console.log(event);

    // 更新数据
    this.setData({
      count: this.data.count + 1,
    });
  },
});

云开发

云函数

获取 appid
获取 openid
生成分享图
调用腾讯云 SDK

云数据库

数据增删改查

云存储

管理文件
上传文件
下载文件
分享文件

Serverless

云数据库

MongoBD
权限管理

示例：

// /pages/about/about.js

// 初始化云数据库
const db = wx.cloud.database();

// 添加数据
handleInsert: function(){
  db.collection('data').add({
    data: {
      name: 'Tom'
    }
  }).then(res=>{
    console.log(res)
  }).catch(err=>{
    console.log(err)
  })
},

// 更新数据
handleUpdate: function () {
  db.collection('data').doc('a9bfcffc5eb78e810058cf6f4b4a03c5').update({
    data: {
      age: 20
    }
  }).then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
},

// 查找数据
handleFind: function () {
  db.collection('data').where({
    name: 'Tom'
  }).get().then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
},

// 移除数据
handleRemove: function () {
  db.collection('data').doc('a9bfcffc5eb78e810058cf6f4b4a03c5').remove().then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
},

云函数

开发环境需要安装Node.js

node -v
v10.16.0

如果提示没有安装

npm install --save wx-server-sdk@latest

云函数求和

// cloudfunctions/sum/index.js

// 云函数 求和
exports.main = async (event, context) => {
  return event.a + event.b;
}

使用云函数

// /pages/about/about.js

handleCallFunc: function() {
    wx.cloud.callFunction({
      name: 'sum',
      data: {
        a: 2,
        b: 3
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },

获取openid

// /pages/about/about.js

handleLoing: function(){
    wx.cloud.callFunction({
      name: 'login'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }

批量删除

// cloudfunctions/batchDelete/index.js

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  return await db.collection('data').where({
    name: 'Tom'
  }).remove()
}

// /pages/about/about.js

handleBatchDelete: function () {
    wx.cloud.callFunction({
      name: 'batchDelete'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },

云存储

图片上传

handleUploadFile: function(){
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)

        // 上传图片
        wx.cloud.uploadFile({
          // 上传至云端的路径
          cloudPath: new Date().getTime() + '.png', 
          filePath: tempFilePaths[0], // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            const fileID = res.fileID

            // 存储文件路径
            db.collection('files').add({
              data:{
                fileID: fileID
              }
            }).then(res=>{
              console.log(res)
            }).catch(err=>{
              console.log(err)
            })
          },
          fail: console.error
        })
        
      }
    })
  }

图片显示和下载

<block wx:for="{{images}}" wx:key="index">
  <image src="{{item.fileID}}"></image>
  <view>
    <button data-fileid="{{item.fileID}}" bindtap="handleDownloadFile">下载图片</button>
  </view>
</block>

// pages/about/about.js

// 初始化云数据库
const db = wx.cloud.database();

Page({
  data: {
    images: []
  },

 getFileList: function() {
    // 获取图片列表
    wx.cloud.callFunction({
      name: 'login',
    }).then(res => {
      db.collection('files').where({
        _openid: res.result.openid
      }).get().then(res => {
        console.log(res)

        this.setData({
          images: res.data
        })

      })
    })
  },

  handleDownloadFile: function(event) {
    // 下载文件
    console.log(event.target.dataset.fileid)

    wx.cloud.downloadFile({
      fileID: event.target.dataset.fileid, // 文件 ID
      success: res => {
        // 返回临时文件路径
        console.log(res.tempFilePath)
        
        // 保存图片到相册
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) { 
            wx.showToast({
              title: '保存成功',
            })
          }
        })
      },
      fail: console.error
    })
    
  }
})