如何入门小程序开发?

  • 回答 (3)
  • 关注 (1)
  • 查看 (329)

求解小程序开发成本,适合用哪种机型,有没有Demo可以参考下?

济南庆典bwa济南庆典bwa修改于
十_年回答于

Hello World - 入门

在第一阶段,我们不需要了解小程序历史和技术细节,您只需要跟随我们完成基本的Hello World例子即可。

第一步

参考上一篇教程,下载微信开发者工具,并根据自己对应的操作系统进行安装。

第二步

打开微信开发者工具,选择新建小程序项目,我们先不需理解AppID的概念,新建项目时选择或使用测试号:小程序系统会给你分配测试账号,并取消勾选“建立普通快速启动模板”的选项,然后点击确定,如图。

1540957519915

第三步

在根目录下创建app.json,然后填入如下代码。

{

  "pages": ["pages/index/index"]

}

1540957691677

在根目录下新建pages目录,然后在pages目录下新建index目录,接着在index目录下创建index.wxml,然后填入以下代码。

<text>Hello World</text>

1540957824362

然后点击菜单栏的项目保存,系统会自动创建index.jsindex.jsonindex.wxss等目录文件,并进行编译,最终我们将看到小程序已经显示我们编写的代码Hello World文件。

1540957897352

恭喜你,已经你已经成功开发出你的第一个小程序啦!这时,你在尝试修改修改index.wxml中的hello world,然后保存,看看会发生什么?

1540958055009

Hello World - 小程序代码组成

在进阶实验前,我们先讲讲小程序的历史及上一步中配置文件的含义。

历史

从技术的维度看,小程序并非凭空冒出来的一个概念。2015年初,微信发布了一整套网页开发工具包,称之为 JS-SDK,开放了拍摄、语音识别、二维码等几十个API。给所有的 Web 开发者打开了一扇全新的窗户,让所有开发者都可以使用到微信的原生能力,去完成一些之前做不到或者难以做到的事情了。

但是在内部测试中,微信团队发现一些复杂的页面会有白屏的问题,例如页面加载了大量的 CSS 或者是 JavaScript 文件,这些文件的执行时间占用了大量的 UI 线程,除了白屏,影响 Web 体验的问题还有缺少操作的反馈,主要表现在页面切换的生硬和点击的迟滞感。微信面临的问题是如何设计一个比较好的系统,使得所有开发者在微信中都能获得比较好的体验。微信团队需要一个快速的加载、更强大的能力、原生的体验、易用且安全的微信数据开放、高效和简单的开发的系统,而这一系统就是本文中需要详细阐述的小程序。

配置文件含义

在上一步中,我们创建了一个app.json文件,还创建了一个index.wxml文件,系统还为我们创建了index.jsindex.jsonindex.wxss等目录文件,接下来,将为大家阐述着几个文件到底是干什么的。为了更直观的展现。我们还是以Hello world为例。

第一步 - json文件

打开刚才的开发工具编辑器,然后在根目录下找到app.json文件,双击打开代码,然后用下面的代码进行替换。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

1540961534435

我们看到,当前界面发生了很大的变化,标题栏由原来的黑色变为了白色,在头部多了一个名为WeChat的字符,然后,我们更改navigationBarTitleText内的字符,将WeChat改为自己想设定的字符,我这里改为你自己想设定的字符,然后将原本的navigationBarBackgroundColor内部的#fff改为#ddd,然后保存,看看会发生什么。

1540961900347

我们注意到,开发者工具刷新后,顶部的bar的文字由原来的Wechat变为了你自定义的字符,bar的颜色也发生了变化。

现在明白了吗?JSON文件在小程序代码中扮演静态配置的作用,在小程序运行之前就决定了小程序一些表现,需要注意的是小程序是无法在运行过程中去动态更新JSON 配置文件从而发生对应的变化的。

第二步 - wxml文件

打开入门中创建的index.wxml文件,使用下面的代码替换原有的代码。

<text>当前时间:{{time}}</text>

然后在打开系统创建的index.js文件,找到data: {}行,然后在大括号之间填入下面的代码,如图。

time: (new Date()).toString()

1540962579971

接着,我们按下保存键,看看会发生什么。

1540962612854

我们看到系统自动将{{time}}变成了当前的时间,那这里是如何实现的呢?原来,在小程序中,我们可以说使用JavaScript代码来通过Dom接口来完成界面的实时更新,WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。我们在index.js定义了当前时间的变量,然后通过WXML中的{{time}}去获取其中的变量。怎么样,大概明白WXML是干什么的了嘛?没明白?没事,我们进行在进行一个实验。

index.wxml文件中,添加下面的代码。

<view> {{a + b}} + {{c}} = d</view>
<view wx:if="{{c > 1}}"> True </view>

和刚才一样,在index.js内的data: {}行,插入以下代码。

time: (new Date()).toString(),
a: 1, b: 2, c:3

1540963650112

我们看到,系统已经将我们的abc变量通过逻辑运算并渲染出来,同时,我们使用wx:if来判断数字c的值是否大于1,如果大于这展示True字符。

现在,大概明白WXML是干嘛的了嘛?我们先用官方文档说明下,WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。是不是有点看不懂,没关系,我这介绍下,WXML是一种类似HTML超文本标记语言,可以描述你小程序前端展示的长相,可以将你的代码转换为展示页面,后续配合WXSS及JavaScript脚本,可以写出非常漂亮的小程序。

第三步、wxss文件

现在,打开你的index.wxss文件,然后输入下面的代码。

/* pages/index/index.wxss */
.text-red{
  color: red
}
.text-blue{
  color: blue
}
.text-yellow{
  color: yellow
}

然后,打开index.wxml文件,使用下面的代码替换所有文件

<text class='text-red'>当前时间:{{time}}</text>
<view class='text-blue'> {{a + b}} + {{c}} = d</view>
<view class='text-yellow' wx:if="{{c > 1}}"> True </view>

保存后看看效果。

1540966942446

我们看到,原来显示为黑色的小程序的字变色为红色、蓝色、黄色。这里改变的颜色刚好与我们编辑index.wxss文件中指定的颜色相同。所以,你明白wxss文件是干什么的了嘛?对的,WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改。WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。

第四步、js文件

js文件使用我们已经在第二步中体验过了,小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。但是,严格的意义上来说,小程序中 JavaScript 的同浏览器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的。

浏览器中的JavaScript 是由 ECMAScript 和 BOM(浏览器对象模型)以及 DOM(文档对象模型)组成的,Web前端开发者会很熟悉这两个对象模型,它使得开发者可以去操作浏览器的一些表现,比如修改URL、修改页面呈现、记录数据等等。

NodeJS中的JavaScript 是由 ECMAScript 和 NPM以及Native模块组成,NodeJS的开发者会非常熟悉 NPM 的包管理系统,通过各种拓展包来快速的实现一些功能,同时通过使用一些原生的模块例如 FS、HTTP、OS等等来拥有一些语言本身所不具有的能力。

小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 来实现的。同浏览器中的JavaScript 相比没有 BOM 以及 DOM 对象,所以类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的,同样的缺少 Native 模块和NPM包管理的机制,小程序中无法加载原生库,也无法直接使用大部分的 NPM 包。

明白了小程序中的 JavaScript 同浏览器以及NodeJS有所不同后,开发者还需要注意到另外一个问题,不同的平台的小程序的脚本执行环境也是有所区别的。

小程序目前可以运行在三大平台:

  • iOS平台,包括iOS9、iOS10、iOS11
  • Android平台
  • 小程序IDE

这种区别主要是体现三大平台实现的 ECMAScript 的标准有所不同。截止到当前一共有七个版本的ECMAScript 标准,目前开发者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的标准,但是在小程序中, iOS9和iOS10 所使用的运行环境并没有完全的兼容到 ECMAScript 6 标准,一些 ECMAScript 6 中规定的语法和关键字是没有的或者同标准是有所不同的,所以一些开发者会发现有些代码在旧的手机操作系统上出现一些语法错误。为了帮助开发者解决这类问题,小程序IDE提供语法转码工具帮助开发者,将 ECMAScript 6代码转为 ECMAScript 5代码,从而在所有的环境都能得到很好的执行。开发者需要在项目设置中,勾选 ES6 转 ES5 开启此功能。

Hello World - 小程序的能力

在上一个步骤中,我们已经熟悉了小程序的组成及代码布局,这一步,我们将介绍小程序的部分能力,组件及API。和以前一样,我们通过Hello world来进行学习。

小程序的组件与API

我们打开小程序代码组成步骤中的index.wxml文件,然后在以前的代码中,加入下面的代码。

<camera device-position="front" flash="auto" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view class='text-red'>预览</view>
<image mode="widthFix" src="{{src}}"></image>

然后打开index.js文件,在page({后面加入下述代码,如图。

	takePhoto() {
		const ctx = wx.createCameraContext()
		ctx.takePhoto({
			quality: 'high',
			success: (res) => {
				this.setData({
					src: res.tempImagePath
				})
			}
		})
	},
	error(e) {
		console.log(e.detail)
	}
})

1540969148552

然后,在你的根目录下创建一个名为app.js的文件,什么内容暂时都不要填写,保存。接下来,我们点击菜单栏的预览按钮,然后用手机扫描弹出的二维码,即可使用手机进行拍照,拍照弹出的照片将附在预览字符下方。

1540969494583

预览效果如图

我们看到,小程序已经能够正常拍照了。那么有同学有疑问了,这里的代码到底做了什么呢?接下来,我将对其解释。

组件

在上面的教程中,我们调用了下面这段代码。

<camera device-position="front" flash="auto" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view class='text-red'>预览</view>
<image mode="widthFix" src="{{src}}"></image>

先不管其他内容,我们主要看看<camera ....... </camera>中间代码的含义。我们看到我们定义了device-positionflashbinderrorstyle这几个属性。那么这几个属性到底是什么意思呢?我们可以看看官方组件文档,找到camera组件,会看到如下表的信息。

属性名

类型

默认值

说明

最低版本

mode

String

normal

有效值为 normal, scanCode

2.1.0

device-position

String

back

前置或后置,值为front, back

flash

String

auto

闪光灯,值为auto, on, off

bindstop

EventHandle

摄像头在非正常终止时触发,如退出后台等情况

binderror

EventHandle

用户不允许使用摄像头时触发

bindscancode

EventHandle

在成功识别到一维码时触发,仅在 mode="scanCode" 时生效

2.1.0

我们看到,表中刚好有我们定义的device-positionflashbinderror这几个内容,原来device-position我们设置的front是选择前置摄像头还是后置摄像头,binderror是显示用户不允许使用摄像头会触发的事件。flash是当前选择是否打开闪光灯,这里我们设置的是auto也就是自动状态。style我们可以暂时不用在意,这里指的是上一步中wxss应该写的内容,我们只是写在了wxml文件中。

我们看到,组件是小程序的一个很重要的功能,组件是小程序的基本组成单元,为了让开发者可以快速进行开发,小程序的宿主环境提供了一系列基础组件。我们刚才使用的camera组件,就是官方提供调用系统底层相机的组件。代码中所展示的buttonviewimage都是一种组件。

限于篇幅,我们不在本文展开所有组件的属性说明,请在使用时前往官方文档进行查阅相关组件说明https://developers.weixin.qq.com/miniprogram/dev/component/

API

在上文中,我们其实已经调用了官方的api,不信?我们看看下面的代码。

takePhoto() {
		const ctx = wx.createCameraContext()
		ctx.takePhoto({
			quality: 'high',
			success: (res) => {
				this.setData({
					src: res.tempImagePath
				})
			}
		})
	},
	error(e) {
		console.log(e.detail)
	}
})

熟悉吧,这段代码中,我们已经调用了微信官方给出的wx.createCameraContext(),API文件。关于此API的详细使用,可以参考官方API文档

在这段代码中,我们首先使用const ctx = wx.createCameraContext()这段代码来将wx.createCameraContext()定义为ctx。然后使用ctx.takePhoto调用takePhoto方法进行拍照。关于takePhoto方法的使用,大家可以参考官方文档。我们在代码中定义了qualitysuccess这两个函数。文档中指出,quality指定的是成像质量,我们选择high高质量。success是回调函数,最终存放我们的照片文件。这里存放的是tempImagePath照片文件的临时路径。

然后,我们在index.wxmlbutton调用index.js中的takePhoto函数。然后在image中调用scr变量做展示。

小程序发布

为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过审核的。建议先自行审核,自审完成之后,我们就可以对其进行上传啦。值得注意的是,如果你需要发布,请将这个小程序的AppID改为你在小程序管理页面注册的AppID,点击微信开发者工具的详情,然后修改AppID为你的AppID即可。

1540973253232

打开微信开发者工具,然就点击菜单栏的工具按钮,再点击上传按钮。

1540972890902

在新弹出的页面中,我们设置好版本号及项目备注。

1540972951445

然后点击上传即可。之后,请打开你微信公众平台小程序管理页面,对小程序进行审核发布。

1540973360470

之后的页面中,点击开发版本,然后再点击提交审核,审核通过后,你的小程序就可以上线了!

fly_with_heartPHP Coder.回答于

入门

运行环境

一图胜千言,我这就不多废话,先上一个图,来讲明下整个运行的环境流程。

总结:小程序前端代码是统一上传到微信服务器,用户访问小程序时,微信客户端自动会去拉取小程序前端所有代码,小程序代码里再调用API从服务器取回数据,并把数据渲染到页面,然后展示给用户。

开发姿势

1. 准备阶段 图示:

注册小程序管理员帐号地址如下:https://mp.weixin.qq.com/wxopen/waregister?action=step1

关联对应的公众号,可以关联也可以不关联,主要是看业务需求。

关于小程序和公众号的区别,首先两个在管理端登录的平台地址是不一样的,其次可以理解为都是属于微信平台的一个应用,这两个应用可以设置关联,前提是注册公众号与小程序的主体信息(即身份信息)需一致。关联后可以在公众号里引导跳转到小程序,小程序与公众号就成为了一套登录体系。

小程序的名字不可和非同主体的公众号名字一样。

2. 开发体验阶段 图示:

只有在小程序管理后台设置为开发者权限的用户才可以扫码访问开发版本小程序,同理体验版也只有设置为体验者权限的用户才可以扫码访问体验版小程序。

开发版可以有多个,即一个开发就是提交一个开发版,互不冲突。但是体验版只有一个,即从众多开发版里设置一个版本做为体验版。

3. 完成阶段 图示:

只有小程序完成发布上线,全体微信用户才可以访问。发布上线是管理员在微信小程序管理后台从体验版或是众多提交的开发版里选一个提交审核成为现网版。

4. 维护&升级阶段

在小程序管理后台可以把当前现网的版本随时回退到老版本,也可以随时挂小程序暂停公告。

小程序每次发布一个新的版本后,当用户访问小程序时,依然访问的是老版本(微信客户端会异步去下载新版本),当小程序生存周期结束后再启动小程序时,就会访问最新版小程序。基础库1.9.9以后,也可以用强制升级接口进行强制升级并启动。接口名为:wx.getUpdateManager(),只在现网版生效。

备注: 当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁。 当短时间内(5s)连续收到两次以上收到系统内存告警,会进行小程序的销毁。

一个DEMO

我这里以一个最简单的Demo让大伙快速的了解整个小程序的开发方式,以及编码规则和组成小程序的各个部件说明。至于具体详细的教程,我想小程序官网写得非常详细了,我这里就不再复述。官网详细教程地址为:

https://developers.weixin.qq.com/miniprogram/dev/index.html 

1. 创建一个小程序

在微信开发者工具上创建一个新的项目,填写上你在微信管理端申请的小程序的APPID,界面如下:

会自动生成一个目录结构的demo。

效果:

2. 文件结构

2.1  每个小程序页面都是由四个文件组件(json, wxml, wxss,js)。 2.2  app.js 为整个小程序的入口文件,app.json为整个小程序的全局配置文件,wxss为全局样式文件。 2.3 project.config.json 为项目配置文件 2.4 pages/ 下面为具体的页了,比如index, 代表首页,其由四个文件组件, json文件为可选文件,可有可无。 2.5 utils/目录下存放的是自己写的公共JS 2.6 lib/目录下存入引入外部的一些公共JS文件 2.7 behaviors/ 存放的是小程序自定义的行为JS 2.8 components/ 存放的是小程序自定义的组件 2.9 img/ 存放的是一些ICO图片

3. 生命周期

3.1 js为入口文件,每个页面都会经过该页,其onLauch触发条件为第一次冷启动后执行一次,onShow的触发条件为点击退出小程序按钮,然后在没有被回收时,又从任务栏呼起小程序时。由上图知道每个小程序的所有页面都会在第一次启动时全部加载。 3.2 每个页面的路由都需要在app.json里定义,否则找不到该路由。如下:

其中pages 就是路由的相关配置; window为小程序窗口风格相关的配置;tabBar为底部导航栏的配置。 3.3 Page页面的onload为第一次加载这个页面时执行,onshow为每次从后台又重新回到前台时会被调用。onReady为整个页面初次渲染完后执行。

3.4  小程序启动方式:冷启动,热启动     a) 小程序初次启动时微信客户端会把小程序整个代码下载到手机里,并访问小程序首页,假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动。     b) 冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。(主要场景有:小程序被回收后,小程序被主动销毁后,小程序扫码进入时等)

3.5 一个页的基本代码写法,如下为index.js

4. 微信原生API

微信原生API主要是开放微信的原生能力,提供一些H5没有的能力,有网络类,媒体类,文件操作类,数据存储类,位置获取类,设备信息类,界面等接口。 详细见地址:https://developers.weixin.qq.com/miniprogram/dev/api/ 

5. 组件

a). 组件包括两类,一类为微信官网定义好的组件,其中只有<canvas/> <video/> <map/> <textarea/>几个组件为原生渲染,其它组件都是为webview渲染,具体这些组件的使用方式参考下面地址的教程:https://developers.weixin.qq.com/miniprogram/dev/component/另一类就是开发者自己定义的组件,我这里主要是重点讲下开发者如何自定组件,以及组件与引用他的父页如何做数据交换。

b). 定义一个组件

我们在开发中,总会有这样的场景就是有一个功能包括界面,逻辑在多个地方都需要反复使用到,比如我们开发的是商城,每个商品用户点击购买时,会弹出一个选择规格,尺寸,颜色的层,这个层基本在好多页面和购买行为处都需要使用,如果不把其写成一个组件,意外着要冗余N份一样的代码。这时候我们就可以把JS+视图抽出来成为一个组件。

定义一个组件:

组件里的properties是对外开放的属性,每个属性有三个字段来标明:type表示属性类型,value 表示属性初始值、 observer 表示属性值被更改时的响应函数。 data里的变量用于渲染组件,其实和properties的调用是一样的,都是用this.data.xxx来调用,组件获取到父页面传递进来的数据,就可以像页面操作data数据一样的操作了。

c).  父页面传数据到组件

引用页面即父页面比如为home.wxml,数据传递到子页面就是通过properties开放出来的字段传递到组件页,引用时传递,包括开放出来的事件。 home.json  需要先在Json配置文件里声明引用的组件

 home.js 父页面里获取需要传递给组件的值,通过this.setData渲染到页面,页面再传递给组件。

home.wxml 用声明里的组件名,开始引入给组件,其中isshow, btns,title都为组件开放出来的数据。

 d).  组件传数据到父页面

这里推荐使用event的发布,订阅模式来把数据传递给父页面。对于event不熟悉可以参阅进阶篇里的”页面间通信”这一节。 先在父页home.js订阅一个事件, 下面只给出部分代码:

即当收到Info这个事件有发布时,就执行setinfo()函数,处理想着数据,setinfo函数为home.js里的一个方法,其入参e,就是发布事件时所传递的参数。 然后在组件里处理完后,发布事件,代码如下:

当组件获取到数据通过emit的方式发布事件,把数据发送出去,而所有监听到info事件的函数都可以正确收到数据。

6. 事件

事件是指视图层到逻辑层的通讯方式,将用户的行为反馈到逻辑层上处理,逻辑层上处理后通过setData把数据又渲染到页面。 目前在界面上绑定一个事件由bind + 事件类型或 catch+事件类型,bind的方式绑定事件不会阻止事件冒泡,catch的方式绑定会阻止事件冒泡。事件类型如下:

比如绑定一个点击事件: <view>{{name}}</view><view bindtap=”fun”></view>,fun为写在逻辑层的响应函数,看上面代码,fun又会把界面上的值变化”这是一个传说”。视图层的值以{{}}包裹。更多的语句参考这一节说明: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

7. 行为 7.1  behaviors 是用于组件间代码共享的特性。 7.2  每个 behavior 可以包含一组属性、数据、生命周期函数和方法,组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior 。 7.3 定义

7.4 组件里引用 在 组件behaviors 属性定义段中将它们逐个列出即可

8. 存储 8.1.本地数据永久性存储 8.2.同一小程序存储大小限定为10M 8.3.和H5的storage存储无半点毛线关系 8.4.以用户维度来隔离,A不可取到B用户数据 8.5.当存储空间不足,会自动清除好久没使用的小程序缓存 8.6.目前微信API提供存储相关的原生接口有如下:

9. 运营 9.1. 扩展快速运营的能力

会不会有这样的场景,就是有时候需要开发一些活动或是运营页在小程序里打开,这时候就需要用到小程序的web-view组件了,而不用每次开发小程序代码然后走发布审核流程了,该组件允许加载一个H5地址的页面,并可以在该页面跳回到小程序。在web-view里打开的H5页暂不支持H5的支付方式,需要支付的话,要重新跳回到小程序页再拉起小程序的支付来完成支付。我这边的写法是编写一个跳转的webview,后台配置相应的运营或是活动地址,获取该地址然后调用公共的webview完成跳转,跳转公共函数如下:

小程序中转页pages/webView/webView 代码如下: webView.js代码

webview.wxml代码:

 9.2.整个小程序的运营和推广方式,我们一般是二维码扫码,或是和其它小程序合作链接,加入微信推广联盟,直接好友转发小程序页面等方式。

特有的脾气

1. 所以api请求必须是https, 在IDE上调试时可以勾选右侧面板上检验HTTPS证书以方便调试,但在手机上则需要在手机上的小程序打开调试模式方可不检验htts证书。

2. 小程序跳转h5页必须是以打开webview(小程序有一个打开web-view组件)的方式打开不可跳转到外部H5页。目前H5页不可跳小程序,只有在小程序以web-view组件打开的H5里才可以跳回到小程序。

3. 以web-view组件方式打开的H5里没办法用H5的方式来支付。

4. APP可以跳转到小程序,小程序只能被动跳转到APP,不可主动跳转到APP,被动是指只有当APP主动跳入小程序,小程序才可以跳回到APP。

5. 小程序是跨平台的,必须运行在微信客户端里。

6. 小程序的渲染方式为webview的方式渲染,而非原生渲染,只有<canvas/> <video/> <map/> <textarea/>几个组件才是原生渲染。

7. 小程序目前统一使用rpx单位来隔离机器之间屏幕大小的差异,以达到适配,让开发者更加专注业务。

8. 小程序开发不能使用Nodejs的扩展,可能官方是考虑到太大的原因。

9. 目前一个小程序不可超过2M,如果小程序做了分包,则所有包加起来不可超过8M,每个包不可超过2M。

10. 小程序里请求的API域名需在小程序管理后台添加到域名白名单方可访问,小程序web-view组件打开的H5地址也需在小程序管理后台添加到业务白名单,并生成一个文件上传到业务服务器, 验证通过方可在小程序里打开这个H5地址(在H5里通过ifram,或是跳转涉及到的域名都需加入业务白名单方可访问)。

11. 微信开发者工具下JS是跑在chrome内核,IOS下是跑在Jscore内核,安卓下是跑在X5内核。

12. 小程序里没有window,document对象,没有cookie的概念。

13. 小程序的链接地址不是以https开头,而是类似这样的/pages/xx/ccc/?id=23 , 参数写法和h5是一样的。

14. 小程序原生API好多对基础库的支持版本有要求,建议在微信管理后台设置最低基础库为1.9以上,当基础库小于这个版本的用户访问小程序时,微信会提示用户升级微信客户端。

15. 小程序的每次的版本发布,都需要经过微信部门的审核通过,才可发布,时间1小时到1天不等。

踩过的坑

1. 就是在写页面的时候,如果页面上有倒计时功能,在小程序onhide后没有停掉倒计时,在iphone下就会触发内存不够,小程序被回收,而在把小程序切回到前台界面上,小程序又没有重新渲染,从而导致白屏。建议在onhide里及时结束倒计时,onshow里再重新启动。

2. 安卓下图片地址如图以//开头,则访问不了。建议后台API返回的地址都带上https

3. 手速很快且页面延迟稍卡的情况下,会重复进入同个页面N次,然后回退时要回退N次才能回退到上一页,建议用一个跳转函数包装下微信的原生页面跳转函数并在里面做点击限速。

4. 如果自己开发的小程序连续更新了N个版本,用户一直没有更新的情况下,突然有一天访问我们小程序,会偶现加载小程序信息超时的错误,从而进入不了小程序。具官方回复是时序出错已修复,但一直时而还会偶现。

5. 在微信上查看小程序的数据及管理小程序,请分别搜索官网的”小程序数据助手”,”小程序开发助手”。

6. 更多官网已知BUG大伙可以在这里查阅https://developers.weixin.qq.com/home?action=get_specific_blog_list&lang=zh_CN&token=880302536&blogcategory=8 

Ne_biubiubiu这就是世界结束的方式回答于

如何使用小程序·云开发

上面就是小程序·云开发简单的使用图谱:在小程序端,直接用官方提供的接口,在云函数端,直接用官方提供的 Node SDK,就可以操作你云的资源。以前开发小程序所担忧的数据库搭建、文件系统部署,通通没有。

你只需要有在小程序开发 IDE 里面的 云开发,开通一下,填写环境 ID,便可以拥有小程序的云能力!

image

当然,其实用云开发,并不排斥原有的后台架构,通过下面的架构,你也可以无缝与原有的后台服务兼容,也简化了一些小程序鉴权的逻辑:

接下来,我会分别从小程序端、服务端讲述如何使用这些云资源。

使用云能力

小程序端

客户端,这里是指在小程序端中。如果要使用云开发能力,请做以下配置:

  • app.json / game.json 中, 中增加字段 "cloud": true
  • project.config.json 中增加了字段 cloudfunctionRoot 用于指定存放云函数的目录
  • 初始化云开发能力:
//app.js
App({
  onLaunch: function () {
    wx.cloud.init({
        traceUser: true // 用户信息会显示在云开发控制台的用户面板中
    });
  }
});

小程序端初始化能力文档

在用户管理中会显示使用云能力的小程序的访问用户列表,默认以访问时间倒叙排列,访问时间的触发点是在小程序端调用 wx.cloud.init 方法,且其中的 traceUser 参数传值为 true

服务端

如果你想在云函数中,操作文件、数据库和云函数资源,你可以使用我们提供的服务端 SDK 进行操作。首先,进入到你的某个云函数中,安装以下依赖包:

npm i --save tcb-admin-node

在云函数中初始化

// 初始化示例
const app = require('tcb-admin-node');

// 初始化资源
// 云函数下不需要secretId和secretKey。
// env如果不指定将使用默认环境
app.init({
  secretId: 'xxxxx',
  secretKey: 'xxxx', 
  env: 'xxx'
});

//云函数下使用默认环境
app.init()

//云函数下指定环境
app.init({
  env: 'xxx'
});

服务端初始化文档

存储

云开发提供存储空间、上传文件、下载文件、CDN加速文件访问等能力,开发者可以在小程序端与服务端通过 API 使用这些能力。

小程序端

// 选择图片
wx.chooseImage({
    success: dRes => {
        // 上传图片
        const uploadTask = wx.cloud.uploadFile({
            cloudPath: `${Date.now()}-${Math.floor(Math.random(0, 1) * 10000000)}.png`, // 随机图片名
            filePath: dRes.tempFilePaths[0], // 本地的图片路径
            success: console.log,
            fail: console.error
        });
    },
    fail: console.error,
});

小程序端存储文档

服务端

const app = require('tcb-admin-node');
app.init();

app.uploadFile({
    cloudPath: "cover.png",
    fileContent: fs.createReadStream(`${__dirname}/cover.png`)
}).then((res) => {
    console.log(res);
}).catch((err) => {
    console.error(err);
});;

控制台

上传好的文件,就会出现在控制台中,如下图。你可以在控制台里删除、下载或者查看图片的详情。

你还可以控文件整体的权限,这里还有一些具体的介绍。

服务端存储文档

数据库

小程序云提供文档型数据库 ( document-oriented database ),数据库包含多个集合(相当于关系型数据中的表),集合近似于一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 文档。

每条记录都有一个 _id 字段用以唯一标志这条记录、一个 _openid 字段用以标志记录的创建者,即小程序的用户。开发者可以自定义 _id,但不可在小程序端自定义(在服务端可以) _openid_openid 是在文档创建时由系统根据小程序用户默认创建的,开发者可使用其来标识和定位文档。

数据库 API 分为小程序端和服务端两部分,小程序端 API 拥有严格的调用权限控制,开发者可在小程序内直接调用 API 进行非敏感数据的操作。对于有更高安全要求的数据,可在云函数内通过服务端 API 进行操作。云函数的环境是与客户端完全隔离的,在云函数上可以私密且安全的操作数据库。

数据库 API 包含增删改查的能力,使用 API 操作数据库只需三步:获取数据库引用、构造查询/更新条件、发出请求。切记,在操作数据库前,请先在控制台中创建 collection

小程序端

const db = wx.cloud.database();

// 插入数据
db.collection('photo').add({
    data: {
        photo: 'cloud://tcb-xxx/05ca1d38f86f90d66d4751a730379dfa6584dde05ab4-Ma9vMN_fw658.jpg',
        title: '风景'
    }
});

// 提取数据
db.collection('photo').get().then((res) => {
    let data = res.data;
    console.log(data);
});

// 输出
// 在小程序端, _openid 会自动插入到数据库中
{
    photo: 'cloud://tcb-xxx/05ca1d38f86f90d66d4751a730379dfa6584dde05ab4-Ma9vMN_fw658.jpg',
    title: '风景',
    _openid: 'oLlMr5FICCQJV-QgVLVzKu2312121'
}

小程序端数据库文档

服务端

const app = require('tcb-admin-node');
app.init();
const db = app.database();

db.collection('photo').limit(10).get().then((res) => {
    console.log(res);
}).catch((err) => {
    console.error(err);
});

// 输出
// 因为是在服务端,其它用户的也可以提取出来
{
    photo: 'cloud://tcb-xxx/05ca1d38f86f90d66d4751a730379dfa6584dde05ab4-Ma9vMN_fw658.jpg',
    title: '风景',
    _openid: 'oLlMr5FICCQJV-QgVLVzKu4312121'
}
{
    photo: 'cloud://tcb-xxx/0dc3e66fd6b53641e328e091ccb3b9c4e53874232e6bf-ZxSfee_fw658.jpg',
    title: '美女',
    _openid: 'DFDFEX343xxdf-QgVLVzKu3312121'
}
{
    photo: 'cloud://tcb-xxx/104b27e339bdc93c0da15a47aa546b6e9c0e3359c315-L8Px2Y_fw658.jpg',
    title: '动物',
    _openid: 'DFDFEX343xxdf-QgVLVzKu3412121'
}

服务端数据库文档

控制台

可以在控制台里,看到用户操作的数据,你也可以自己在控制台上添加、更新或删除数据。

如果数据量庞大,可以设置索引提供查询的效率。

数据库也可以通过设置权限,管控每个 collection

云函数

云函数是一段运行在云端的代码,无需管理服务器,在开发工具内一键上传部署即可运行后端代码。

开发者可以在云函数内获取到每次调用的上下文(appidopenid 等),无需维护复杂的鉴权机制,即可获取天然可信任的用户登录态(openid)。

小程序端

wx.cloud.callFunction({
    name: 'addblog', // 云函数名称
    data: { // 传到云函数处理的参数
        title: '云开发 TCB',
        content: '存储、数据库存、云函数'
    }
}).then(res => {
    console.log(res)
}).catch((err) => {
    console.error(err);
});

小程序端云函数文档

服务端

const app = require("tcb-admin-node");
app.init();

app.callFunction({
    name: 'addblog', // 云函数名称
    data: { // 传到云函数处理的参数
        title: '云开发 TCB',
        content: '存储、数据库存、云函数'
    }
}).then((res) => {
    console.log(res);
}).catch((err) => {
    console.error(err);
});

服务端云函数文档

控制台

上传好之后的云函数,都会在这里罗列出来。

每次调用云函数,都可以在这里看到日志,还可以构造测试的参数,用于调试。

语法糖

大部份的接口,目前都支持两种写法,分别是Promise 和 Async/Await,本节以 callFunction 作为例子,在云函数中介绍这两种写法。 Async/Await 本质上是基于 Promise 的一种语法糖,它只是把 Promise 转换成同步的写法而已。

Promise

const app = require("tcb-admin-node");
app.init();

exports.main = (event, context, callback) => {
    app.callFunction({
        name: 'addblog', // 云函数名称
        data: { // 传到云函数处理的参数
            title: '云开发 TCB',
            content: '存储、数据库存、云函数'
        }
    }).then((res) => {
        console.log(res);
        callback(null, res.data);
    }).catch((err) => {
        callback(err);
    });
};

Async/Await

const app = require("tcb-admin-node");
app.init();

exports.main = async (event, context) => {
    let result = null;

    try {
        result = await app.callFunction({
            name: 'addblog', // 云函数名称
            data: { // 传到云函数处理的参数
                title: '云开发 TCB',
                content: '存储、数据库存、云函数'
            }
        });
    }
    catch (e) {
        return e;
    }

    return result;
};

在云函数里使用,由于是 Node 8.9 或以上的环境,因此天然支持 Async/Await 诘法,但在小程端要使用的话,需要额外引入 Polyfill,比如这个开源的项目:regenerator

开发者资源

由于小程序·云开发是基于腾讯云的云开发开发的功能,因此在腾讯云与小程序两边都有不少的开发者资源,这里供大家参阅读:

  • 腾讯云开发者资源及文档
  • 腾讯云云开发平台官方 Github
  • 微信小程序·云开发文档

扫码关注云+社区