微信小程序开发入门教程(一)---hello world
由于无法备案网站,前期做了个微信小程序(开发版)就搁置了,几乎忘了开发过程。现在重新梳理,做个记录。
一、最基本的小程序前端例子hello
1、下载安装 微信开发者工具 官网: https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
2、运行后首先提示扫码,在手机上确认登录(我以前注册过微信公众平台,如果你未注册过的话,可能需要先去注册)。登录后,页面显示了我之前做的几个小程序项目。排第一个的是一个加号(+),用来新建项目。
3、点上步的加号(+),新建项目名称写的是:hello ; 目录 我设的是:E:\wxDEV\hello;AppId 我点选的是:测试号;开发模式:小程序;后端服务:默认不使用云服务;语言:javascript ; 然后点:新建
4、在 微信开发者工具 界面上,点三个横点(…)弹出E:\wxDEV\hello硬盘目录,里面就是小程序前端代码了。点预览(眼睛形状)图标,会弹出二维码,用手机扫码后,可以在手机上测试使用小程序了。(在手机微信中的微信页面,向下滑动,会出现最近使用过的小程序)
5、但那些代码表示什么呢?手册在:https://developers.weixin.qq.com/miniprogram/dev/framework/ 下面分析一下E:\wxDEV\hello中的代码文件
5.1、sitemap.json 文件中有个链接:https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html;看了一下,是控制微信爬虫,即是否允许页面内容被用户搜索到
5.2、project.config.json 项目配置文件:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html 如:可以设置为小程序插件项目。
5.3、app.wxss https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html 相当于CSS样式表文件。
5.4、app.json https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE 小程序配置,又分为全局配置和页面配置。如:有哪些页面,页面标题、颜色等
5.5、app.js https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html 注册小程序APP实例,大概相当于程序入口的main函数吧。
6、目录utils下有util.js 大概是引入外部 js文件;参考:https://www.cnblogs.com/wangting888/p/9701658.html
7、目录pages下有两个目录,index和logs,每个目录表示一个小程序页面。其中,后缀为.wxml的相当于html页面,其它类似前面介绍的,分别是样式表、配置和js代码文件。参考:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
二、只有前端是不够的,没条件搭服务器怎么办?好在微信开发者工具提供了强大的云开发能力,参考上面步骤,新建项目helloyun(云端是node.js语言)
1、参考上面第3步新建小程序项目,项目名称:helloyun ; 目录:E:\wxDEV\helloyun ; AppID:只能选择自己注册的AppID,测试号无法云开发;开发模式:小程序;后端服务:小程序云开发;然后点 新建。云开发的例子已生成。可以点预览,并在手机上查看了。手机上小程序本身就相当于教程,其中介绍了两种操作云端数据库(或函数、调用)的办法:一是前端操作数据库;二是在cloudfunctions目录中新建云函数,使用wx-derver-sdk
参考:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
2、云开发项目的目录看似更简洁,E:\wxDEV\helloyun目录结构如下:
--cloudfunctions(目录)
--miniprogram(目录)
-project.config.json
-README.md
3、miniprogram对应的小程序前端(与本文第一部分类似),对应云端的是cloudfunctions目录(2019年8月8日生成的云开发项目,与以前用旧版开发工具生成的目录结构不一样了),新版的 E:\wxDEV\helloyun\cloudfunctions 目录下有4个目录:
-callback
-echo
-login
-openapi
4、先从手机的云开发QuickStart入手,点上传图片,然后拍照上传。根据上传后的提示,打开开发者工具,点云开发,进入云开发控制台(确认你是否已开通了云开发功能),在 存储 下,可以看到刚上传的my-image.jpg。
我们还是从前端入手分析,在开发者工具中, 查看E:\wxDEV\helloyun\miniprogram\pages\index\index.wxml 的代码。找到 上传图片 字样。对应的bindtap是
<view class="uploader">
<button class="uploader-text" bindtap="mydbadd">数据库add</button>
</view>
同时,在E:\wxDEV\helloyun\miniprogram\pages\index\index.js的最后一个})之前,加以下代码(也就是E:\wxDEV\helloyun\miniprogram\pages\databaseGuide\databaseGuide.js中的代码)
//my测试数据库add
mydbadd: function() {
const db = wx.cloud.database()
db.collection('goods').add({
data: {
count:
},
success: res => {
// 在返回结果中会包含新创建的记录的 _id
this.setData({
counterId: res._id,
count:
})
wx.showToast({
title: '新增记录成功',
})
console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败:', err)
}
})
},
编译,点击 数据库add按钮 后,会看到后台数据库中新增了一条记录(确保已在后台数据库中设置了goods集合)。开发者工具 控制台console中也有相应的提示。
project.config.json
文件,可以看到已经有了cloudfunctionRoot
字段(如果没有,就按官方教程增加)// 云函数入口文件
const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext() return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
sum: event.a + event.b,
}
}
//my测试数据库add
mydbadd: function() {
const db = wx.cloud.database()
db.collection('goods').add({
data: {
count:
},
success: res => {
// 在返回结果中会包含新创建的记录的 _id
this.setData({
counterId: res._id,
count:
})
wx.showToast({
title: '新增记录成功',
})
console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败:', err)
}
})
wx.cloud.callFunction({
// 云函数名称
name: 'sum',
// 传给云函数的参数
data: {
a: ,
b: ,
},
})
.then(res => {
console.log(res.result) //
})
.catch(console.error)
},
这样,在增加数据库数据的同时,就会调用云函数,并在开发者工具的console中显示调用结果。
最新文章
- Libero 使用拾忆
- centos安装禅道的步骤
- REDIS 事务机制
- Web前端开发规范文档
- 水果项目第1集-想法>;需求->;功能->;数据库设计->;类设计
- Snort - manual 笔记(三)
- Multithreading annd Grand Central Dispatch on ios for Beginners Tutorial-多线程和GCD的入门教程
- leetcode:Partition List
- C语言第六节基本运算符
- 鼠标滑过提示title
- Socket异步通信学习三
- [Stephen]自定义SimpleAdapter
- 【转】JQUERY相关的几个网站
- Android学习之DragEvent
- [转载]Arguments
- 解决ajax跨域的方法原理详解之Cors方法
- element vue 表格编辑
- WINDOWS7环境下Informatica的安装[新手]
- sparse 稀疏函数的用法
- windows下配置ssh访问github