备案控制台
开发者社区 彭世瑜的博客 文章 正文

微信小程序开发实践

2021-11-26 126
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序开发实践

资源

视频

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、项目文件

  1. json 配置
  2. wxml 模板
  3. wxss 样式
  4. 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;
}

第三方样式库

  1. weui
  2. iview weapp
  3. 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,
    });
  },
});

云开发

  1. 云函数
  • 获取 appid
  • 获取 openid
  • 生成分享图
  • 调用腾讯云 SDK
  1. 云数据库
  • 数据增删改查
  1. 云存储
  • 管理文件
  • 上传文件
  • 下载文件
  • 分享文件

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
    })
  }
})

电影评分示例

引入Vant Weapp

参考 https://youzan.github.io/vant-weapp/#/quickstart

在 miniprogram 目录下

npm i @vant/weapp -S --production

工具设置

工具 -> 构建 npm

详情 -> 勾选 使用 npm 模块


发送请求

小程序端 需要icp备案

云函数 无需备案


request库

豆瓣电影

电影列表API：

http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=0&count=10`


代码地址：

https://github.com/mouday/weixin-app-demo


文章标签：
JavaScript
开发工具
数据安全/隐私保护
API
Serverless
数据格式
数据库
存储
JSON
小程序
编程达人
目录
相关文章
景天科技苑
|
12天前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发（一）
轻松学会微信小程序开发（一）
景天科技苑
34 0
游客hjgt3xacvje4w
|
13天前
|
JSON 小程序 JavaScript
微信小程序开发1
微信小程序开发1
游客hjgt3xacvje4w
22 1
Boale_H
|
2月前
|
移动开发 小程序 API
微信小程序的一些开发限制
微信小程序的一些开发限制
Boale_H
101 1
盖丽男
|
4月前
|
小程序 JavaScript 前端开发
如何开发一个微信小程序
如何开发一个微信小程序
盖丽男
138 0
迪_迦
|
9月前
|
小程序 前端开发 JavaScript
微信小程序开发详解
微信小程序是一种可以在微信中运行的应用程序，它使用了微信提供的开发框架和工具，可以在不需要下载安装的情况下直接使用。微信小程序采用了类似Web的开发方式，开发者可以使用HTML、CSS、JavaScript等前端技术进行开发。无需下载安装，直接在微信中使用可以访问部分系统API，实现更强大的功能通过微信提供的开发框架和工具，可以方便地进行开发、测试和发布在 components 目录下创建组件文件夹,同级目录创建 json、js、wxml、wxss 四个文件。文件名与文件夹名相同。
迪_迦
292 0
〔Lisa〕
|
7月前
|
小程序 前端开发 JavaScript
微信小程序开发之框架篇
微信小程序开发之框架篇
〔Lisa〕
160 0
时雨h
|
7月前
|
小程序 JavaScript 前端开发
微信小程序开发（1）
微信小程序开发（1）
时雨h
58 0
Designer小郑
|
10月前
|
小程序 JavaScript 开发工具
微信小程序 开发前需要做的那些事
微信小程序 开发前需要做的那些事
Designer小郑
119 0
auqbllxiu
|
存储 JSON 小程序
微信小程序开发实践
微信小程序开发实践
auqbllxiu
76 0
游客vfplnk2ev4hvq
|
小程序 JavaScript API
从零开发简易微信小程序
某日，心血来潮，想捣鼓下微信小程序，尝试微信的云开发功能，于是就有了下面简单的成品：
游客vfplnk2ev4hvq
251 0
从零开发简易微信小程序

热门文章

最新文章

  • 1
    Maven 中央仓库地址
  • 2
    【SSL】OV、DV和EV证书的区别
  • 3
    OLAP与OLTP介绍
  • 4
    大数据上手实战！《Elasticsearch 实战进阶营》第二季限时免费报名啦
  • 5
    tr命令
  • 6
    JavaScript理解(转载)
  • 7
    shell重定向小记
  • 8
    CentOS7 yum lamp 虚拟主机配置 lamp各组件简单影响性能的参数调整--for 一定的环境需求
  • 9
    【SICP练习】49 练习2.17
  • 10
    如何让Pl/Sql查出的某个值可编辑？
  • 1
    如何修改NFT的元数据
    36
  • 2
    【机器学习】噪声数据对贝叶斯模型有什么样的影响？
    29
  • 3
    rabbitmq插件升级-延时队列为列
    25
  • 4
    【机器学习】比较朴素贝叶斯算法与逻辑回归算法
    23
  • 5
    如何解决Linux时差问题
    21
  • 6
    rabbitmq安装erlang环境后没生效
    20
  • 7
    高性能代码如何编写？-2
    21
  • 8
    高性能代码如何编写？-1
    17
  • 9
    【机器学习】朴素贝叶斯分类器的缺点是什么？
    17
  • 10
    【机器学习】朴素贝叶斯分类器的优点是什么？
    15

    • 相关课程

    更多
  • IoT小程序框架课程
  • 移动Web前端开发
  • C++ 入门教程开发文档
  • 前端开发框架Bootstrap使用教程
  • 零基础学前端HTML+CSS
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 如何做微信小程序性能优化
  • 支付宝小程序教程
  • 微信PaxosStore简介

    • 相关实验场景

    更多
  • 1分钟SAE部署PHP商城小程序
  • 搭建微信小程序（AMD 8代）
  • 搭建微信小程序
  • 前端开发基础1：前端开发环境的安装和配置
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）