开发者社区> auqbllxiu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

微信小程序开发实践

简介: 微信小程序开发实践
+关注继续查看

资源

视频

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


            </div>

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

相关文章
微信小程序开发
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bitree1/article/details/54945190  微信小程序开发步骤: 1.注册:https://mp.weixin.qq.com/  在微信公众平台注册一个账号。
684 0
微信小程序开发实践入门教程
在去年2017年1月9日,张小龙在2017微信公开课Pro上发布的小程序正式上线 。时至今日,小程序已经有整整一年时间了 。在2017年12月28日,微信更新的 6.6.1 版本开放了小游戏,「跳一跳」小游戏在那一晚彻底火了。由于微信的流量庞大,所以很多开发者看好小程序,我也不例外 。
0 0
微信小程序开发技术栈
微信小程序开发技术栈
0 0
微信小程序开发(一)
今天将在小程序中添加底部tab功能切换,并新增关于我的功能。
0 0
微信小程序开发实践
微信小程序开发实践
0 0
微信小程序开发实践
微信小程序开发实践
0 0
微信小程序开发实践
微信小程序开发实践
0 0
微信小程序开发实践
微信小程序开发实践
0 0
微信小程序开发实践
微信小程序开发实践
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
如何做微信小程序性能优化
立即下载
Re: 移动开发的未来
立即下载
低代码开发师(中级)实战教程
立即下载