如何从零开始搭建一款小程序?

  • 回答 (10)
  • 关注 (0)
  • 查看 (414)

求问,我想开发一款小程序,但是入门一直不知道怎么入门,求相关案例~

a563831029a563831029提问于
真假二十一很喜欢腾讯云!回答于

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程,前面已经有几位前辈的文章珠玉在前,我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧。

在结构和样式方面,小程序提供了一些常用的标签与控件,比如:

view,小程序主要的布局元素,类似于html标签的div,你也完全可以像控制div那样去控制view。

scroll-view,你要滚动内容的话,没必要用view去做overflow,scroll-view提供了更为强大的功能,通过参数的调整,你可以控制滚动方向,触发的事件等等

swiper,滑块视图容器,对于新手来说,再也不用为选用哪个滚动插件伤脑筋了

icon,小程序提供了多种图标供你直接使用

text,文本,唯一可以通过长按被选中内容的一个组件。

progress,进度条

button 按钮,尽量使用小程序提供给你的几种样式参数

表单以及常用表单组件 :form,input,checkbox,label,picker,radio,slider,switch

各种操作反馈,消息提示框:action-sheet,modal,toast,loading

以及一些媒体组件,video、audio,image,canvas等等

这些东西在几位前辈的文章里,以及微信的开发文档里都有更详细的介绍,我这里就不再一一介绍。

那么我们就快速的跑通一个小程序的demo先。

在开发之前你要有微信开发者工具,下载地址

这里我要假设大家有已经拿到了内测或者公测的资格,因为没有拿到的话下面的步骤是没法进行的。

打开以后你会看到这样的界面,我们选择小程序进入

这时候就可以创建项目了

填写你拿到的appid,和自己的项目名称以及目录,然后就可以打开自己的项目了。界面如下:

左侧菜单栏就不说了,中间是编译后的预览界面,新的开发者工具已经可以做到实时更新,不需要每次都去点编译了。

右侧是你的项目目录,其中pages就是你的页面结构目录了,每个页面下面必须要有 js,wxml,wxss这三个文件,缺少任何一个的话都无法上传预览。

然后就是那个当前态的app.json文件,app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。,我们简单的配置一下:

这里比较好的一点是,navigationbar的背景颜色支持自定义任意颜色了,不再有只能黑白透明的限制,还是很不错的。

然后我们在页面p里简单的写个Hello World

保存以后预览界面已经立即刷新出来

如果想真机测试(个人建议一定要真机测试,特别是给上下游预览的时候,pc上的样式还原程度较差,包括字体等等,毕竟系统不同。),只需要选中项目选项

然后在界面上点击预览

下面的三个选项都比较实用,可以根据需要点选。然后就会弹出可以用注册过的微信号真机预览的二维码,如图:

这样一个简单的小程序demo就完全跑通了。

最爱开车啦互联网的敏感者回答于

首先,需要确定合适的平台,承载移动端的需求。

通过对团队当前的资源情况、对移动端的开发成本和效率评估,我们决定小步快跑,通过微信已有的生态来实现腾讯云移动服务闭环。

其次,基于腾讯云已有的服务,选出合适的能力移动化。

确定好合适的平台,做好基础的能力打通,下一步就是确定合适的能力进行移动化。

第三,利用平台先天的传播能力,为产品持续引流。

据不完全统计,2017年小程序累计更新迭代了100多项能力,开放了近50多个入口。这其中比较重要的包括:关联公众号、小程序互相跳转、开放群能力、功能直达、小程序流量主…….(注:3)不仅如此,公众号关联小程序后,还可以在图文消息、自定义菜单、模板消息等功能中使用小程序(注:4)。利用这样的能力,在移动端传播过程中,我们不必同时宣传公众号和小程序,只需要在合适的位置推广公众号,引导用户关注,小程序的新增和活跃用户自然会越来越多。再以账户充值为例:用户在公众号收到余额提醒之后,可以直接点击模板消息卡片,进入小程序充值。这种方式的效率高,容易形成二次转化,因此我们也在用它逐渐补充和替代短信、邮件的通知。

最后,不断打磨产品细节,满足需求的同时满足用户体验。

曾经听到句话:To B服务不需要体验太好,只要做出来,用户已经很开心了。对比我不是很认同。从产品使用经验和阅历出发,国内互联网用户在近几年的交互和审美基础,是在不断提高的。这时候我们更应该注重体验,把控细节,而不是把功能堆上去就完了

拿日常生活中最常见、最经典的设计举例:盲道 (视障人士行走道路)。它的设计初衷是引导视障人士放心前行、或者提示前方有转弯或障碍,可是现实中却不一定如此。参考下面两张图片,能说“已经给视障人士设计了专用的道路,他们已经很开心了”?

从体验出发,我们在产品建设过程中也有不少思考。比如在服务器列表,凸显最常用的操作而不是把所有信息堆在一起;根据用户性别,给个人中心加上虚拟头像,提高用户的认知,而不是冰冷的展示账号ID。最终通过数据的验证,优化后不论从用户反馈还是功能点击量,都得到了积极正面的结果。

综上,通过汇集合适的平台、合适的能力、合理利用平台生态,并不断打磨体验,我们最终打造出基于公众号为信息载体、小程序为管理平台的移动产品“腾讯云助手”,服务于腾讯云数十万级的用户,帮助他们快速定位、解决问题。

酒当歌趁年轻,多折腾回答于

如果您希望一天内就打通 webrtc 和 小程序音视频 的互通,那么我推荐您不要从零开始,因为那会耗费您太多时间去踩坑和 bugfix,推荐您直接使用我们封装好的 <webrtc-room> ,这套方案既可以帮助您完成快速接入,又能满足一定的定制需求。

另外,不要忘记在微信=>发现=>小程序=>腾讯云视频云,体验一下腾讯云官方 Demo 中的 WebRTC 互通效果哦。

标签说明

<webrtc-room> 标签是基于 <live-pusher> 和 <live-player> 实现的用于 WebRTC 互通的自定义组件。如果您希望直接使用 <live-pusher> 和 <live-player> 标签完成对接,或者想要了解 <webrtc-room> 的内部原理,可以参考 DOC

版本要求

  • 微信 6.6.6 版本开始支持。

效果演示

  • PC 端 用 Chrome 浏览器打开 体验页面 可以体验桌面版 WebRTC 的效果。
  • 微信端 发现=>小程序=>搜索“腾讯视频云”,点击 WebRTC 功能卡,就可以体验跟桌面版 Chrome 互通的效果了。

对接资料

对接资料

说明

下载链接

小程序源码

包含<webrtc-room>的组件源码以及demo源码

DOWNLOAD

PC端源码

基于WebrtcAPI实现的Chrome版WebRTC接入源码(其中 component/WebRTCRoom.js 实现了一个简单的房间管理功能,component/mainwindow.js包含了对 WebRTC API 的使用代码)

webrtc(Chrome).zip

后台源码

实现了一个简单的房间列表功能,同时包含<webrtc-room>几个所需参数的生成代码

webrtc_server_list.zip

标签详解

属性定义

属性

类型

说明

template

String

'1v3'

必要,标识组件使用的界面模版(用户如果需要自定义界面,请看 界面定制)

sdkAppID

String

‘’

必要,开通 IM 服务所获取到的 AppID

userID

String

''

必要,用户 ID

userSig

String

‘’

必要,身份签名,相当于登录密码的作用

roomID

Number

‘’

必要,房间号

privateMapKey

String

‘’

必要,房间权限 key,相当于进入指定房间 roomID 的钥匙

beauty

Number

0~5

可选,默认 5, 美颜级别 0~5

muted

Boolean

true, false

可选,默认 false,是否静音

debug

Boolean

true, false

可选,默认 false,是否打印推流 debug 信息

bindRoomEvent

function

必要,监听 <webrtc-room> 组件返回的事件

enableIM

Boolean

true, false

可选,默认false

bindIMEvent

function

当IM开启时必要,监听 IM 返回的事件

操作接口

<webrtc-room> 组件包含如下操作接口,您需要先通过 selectComponent 获取 <webrtc-room> 标签的引用,之后就可以进行相应的操作了。

函数名

说明

start()

启动

pause()

暂停

resume()

恢复

stop()

停止

switchCamera()

切换摄像头

var webrtcroom = this.selectComponent("#webrtcroomid")
webrtcroom.pause();

事件通知

<webrtc-room> 标签通过 onRoomEvent 返回内部事件,通过 onIMEvent 返回 IM 消息事件,事件参数格式如下

"detail": {
  "tag": "事件tag标识,具有唯一性",
  "code": "事件代码",
  "detail": "对应事件的详细参数"
}

示例代码

// Page.wxml 文件
<webrtc-room id="webrtcroom"
	roomID="{{roomID}}"
	userID="{{userID}}"
	userSig="{{userSig}}"
	sdkAppID="{{sdkAppID}}"
	privateMapKey="{{privateMapKey}}"
	template="1v3"
	beauty="{{beauty}}"
	muted="{{muted}}"
	debug="{{debug}}"
	bindRoomEvent="onRoomEvent"
	enableIM="{{enableIM}}"
	bindIMEvent="onIMEvent">
</webrtc-room>


// Page.js 文件
Page({
	data: {
		//...
		roomID: '',
		userID: '',
		userSig: '',
		sdkAppID: '',
		beauty: 3,
		muted: false,
		debug: false,
		enableIM: false
	},
    onRoomEvent: function(e){
        switch(e.detail.tag){
            case 'error': {
                //发生错误
                var code = e.detail.code;
                var detail = e.detail.detail;
                break;
            }
        }
    },
    onIMEvent: function(e){
        switch(e.detail.tag){
            case 'big_group_msg_notify': 
                //收到群组消息
                console.debug( e.detail.detail )
                break;
            case 'login_event': 
                //登录事件通知
                console.debug( e.detail.detail )
                break;
            case 'connection_event': 
                //连接状态事件
                console.debug( e.detail.detail )
                break;
            case 'join_group_event': 
                //进群事件通知
                console.debug( e.detail.detail )
                break;
        }
    },

  onLoad: function (options) {
		self.setData({
			userID: self.data.userID,
			userSig: self.data.userSig,
			sdkAppID: self.data.sdkAppID,
			roomID: self.data.roomID,
			privateMapKey: res.data.privateMapKey
		}, function() {
			var webrtcroomCom = this.selectComponent('#webrtcroom');
			if (webrtcroomCom) {
				webrtcroomCom.start();
			}
		})
	},
  	
})

使用指引

请确认已经参照 Demo部署 开通了相关服务和并正确的完成了配置。

step1: 下载自定义组件源码

<webrtc-room> 并非微信小程序原生提供的标签,而是一个自定义组件,所以您需要额外的代码来支持这个标签。点击 小程序源码 下载源码包,您可以在 wxlite 文件夹下获取到所需文件。

step2: 在工程中引入组件

  • 在 page 目录下的 json 配置文件内引用组件,这一步是必须的,因为 <webrtc-room> 并非原生标签。 "usingComponents": { "webrtc-room": "/pages/webrtc-room/webrtc-room" }
  • 在 page 目录下的 wxml 文件中使用标签<webrtc-room id="webrtcroomid" roomID="{{roomID}}" userID="{{userID}}" userSig="{{userSig}}" sdkAppID="{{sdkAppID}}" privateMapKey="{{privateMapKey}}" template="1v3" beauty="{{beauty}}" muted="{{muted}}" debug="{{debug}}" bindRoomEvent="onRoomEvent" enableIM="{{enableIM}}" bindIMEvent="onIMEvent"> </webrtc-room>

step3: 获取 key 信息

按照如下表格获取关键的 key 信息,这是使用腾讯云互通直播服务所必须的几个信息:

KEY

示例

作用

获取方案

sdkAppID

1400087915

用于计费和业务区分

step1 中获取

userID

xiaoming

用户名

可以由您的服务器指定,或者使用小程序的openid

userSig

加密字符串

相当于 userid 对应的登录密码

由您的服务器签发(PHP / JAVA)

roomID

12345

房间号

可以由您的服务器指定

privateMapKey

加密字符串

进房票据:相当于是进入 roomid 的钥匙

由您的服务器签发(PHP / JAVA)

下载 sign_src.zip 可以获得服务端签发 userSig 和 privateMapKey 的计算代码(生成 userSig 和 privateMapKey 的签名算法是 ECDSA-SHA256)。

step4: 进入房间

self.setData({
	userID: userID,
	userSig: userSig,
	sdkAppID: sdkAppID,
	roomID: roomID,
	privateMapKey: privateMapKey
}, function() {
	var webrtcroomCom = this.selectComponent('#webrtcroomid');
	if (webrtcroomCom) {
		webrtcroomCom.start();
	}
})

<h2 id="CustomUI"> 界面定制 </h2>

  • 创建界面模版
//第一步:新建 /pages/templates/mytemplate 文件夹,并创建 mytemplate.wxml 和 mytemplate.wxss 文件

//第二步:编写 mytemplate.wxml 和 mytemplate.wxss 文件
//mytemplate.wxml
<template name='mytemplate'>
    <view class='videoview'>
        <view class="pusher-box">
            <live-pusher
                id="rtcpusher"
                autopush
                mode="RTC"
                url="{{pushURL}}"
                aspect="{{aspect}}"
                min-bitrate="{{minBitrate}}"
                max-bitrate="{{maxBitrate}}"
                audio-quality="high"
                beauty="{{beauty}}"
                muted="{{muted}}"
                waiting-image="https://mc.qcloudimg.com/static/img/
								     daeed8616ac5df256c0591c22a65c4d3/pause_publish.jpg"
                background-mute="{{true}}"
                debug="{{debug}}"
                bindstatechange="onPush"
                binderror="onError">
                <cover-image  class='character' src="/pages/Resources/mask.png"></cover-image>
                <cover-view class='character' style='padding: 0 5px;'>我</cover-view>
            </live-pusher>
        </view>
        <view class="player-box" wx:for="{{members}}" wx:key="userID"> 
            <view class='poster'>
                <cover-image class='set'
			       src="https://miniprogram-1252463788.file.myqcloud.com/roomset_{{index + 2}}.png">
				</cover-image>
            </view>
            <live-player
                id="{{item.userID}}"
                autoplay
                mode="RTC"
                wx:if="{{item.accelerateURL}}"
                object-fit="fillCrop"
                min-cache="0.1"
                max-cache="0.3"
                src="{{item.accelerateURL}}"
                debug="{{debug}}"
                background-mute="{{true}}"
                bindstatechange="onPlay">
                <cover-view class='loading' wx:if="{{item.loading}}">
                    <cover-image src="/pages/Resources/loading_image0.png"></cover-image>
                </cover-view>
                <cover-image  class='character' src="/pages/Resources/mask.png"></cover-image>
                <cover-view class='character' style='padding: 0 5px;'>{{item.userName}}</cover-view>
            </live-player>  
        </view> 
    </view>
</template>

//mytemplate.wxss
.videoview {
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
  • webrtc-room 组件引入模版
//为 <webrtc-room> 组件中的 webrtcroom.wxml 文件添加自定义模版
<import src='/pages/templates/mytemplate/mytemplate.wxml'/>
<view class='conponent-box'>
    <view styles="width:100%;height=100%;" wx:if="{{template=='1v3'}}">
        <template is='mytemplate' data="{{pushURL, aspect, 
				      minBitrate, maxBitrate, beauty, muted, debug, members}}"/>
    </view>
</view>

//为 <webrtc-room> 组件中的 webrtcroom.wxss 文件添加自定义样式
@import "../templates/mytemplate/mytemplate.wxss";

Chrome端对接

了解腾讯云官网的 WebrtcAPI ,可以对接 Chrome 端的 H5 视频通话,因为不是本文档的重点,此处不做赘述。

实时音视频产品开通

想要尝试这些接入,首先要开通腾讯云实时音视频,快来接入吧~

三进制本科在读回答于

导语:本文章的主要目的就是针对两类人: 一类是没有做过小程序开发,但是想了解小程序整个开发过程及环境和开发中需要注意哪些问题的人,你适合读本文的入门篇,可以帮你节省至少几天的时间。 另一类人就是你写过小程序,但是想对小程序更深入的了解,并想对你的小程序进行一定程度上的优化,那你更适合阅读本文进阶篇,本文给出了一些优化的方向及方法,可供参考。 好了,现在让我们来开启小程序的前生今世探险之旅吧。

入门

运行环境

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

总结:小程序前端代码是统一上传到微信服务器,用户访问小程序时,微信客户端自动会去拉取小程序前端所有代码,小程序代码里再调用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天不等。

萌萌呆想玩游戏却不知道这么开机的吃瓜少年。回答于

说到小程序,不得不提小游戏,那么如何从零快速搭建小游戏呢?什么是小游戏?

从普通用户的视角看,小游戏是小程序的一个子类目,可在微信内被便捷的获取和传播,即点即玩,具备出色的用户体验。小游戏是小程序,普通用户分不清也无需分清。

同时,从开发者的视角,它可以看作是基于 Canvas/WebGL +  微信社交开放能力的一个新平台。下图是一个小游戏的一个架构概览:

这是一个典型的分层架构。最上层蓝色部分,是游戏代码,分为游戏逻辑,游戏引擎、weapp-adapter三部分。大部分游戏开发会用到一些引擎的工具、工作流,以及利用引擎封装的高层 API去实现游戏逻辑。其次是 weapp-adapter,因为小游戏的底层一方面不是 webview,可以简单看成是 webview经过精简、优化过后的平台;另一方面核心能力的实现上却参考了 webview。所以这里如果有一个适配器,把小游戏的底层 API——wx API适配到一个接近 webview的接口,对上层引擎、已存在的游戏接入微信小游戏平台则会更加容易,这个就是 weapp-adapter的作用。其中只有游戏逻辑是必要的。

中间层红色部分是微信以及小游戏 Runtime,Runtime对外暴露的能力叫 wx API,有一个基础库的。有一个 jsvm用于执行游戏的 Javascript代码,在安卓上是用 V8Core,iOS则是 JavaScriptCore。再下面一层是核心的渲染能力的实现,包括 Canvas 2d以及 WebGL,当然还有微信开放能力相关 API的实现。

可以看到,在架构上小游戏和小程序是有差别的,小游戏没有页面概念的,wxss/wxml不再存在。其次,底层实现也不是 webview,小游戏和 webview的关系只能说是渲染相关的核心能力可以通过 weapp-adapter的简单适配保持接口一致,但同时很多 webview上存在的功能并没有对等的实现,比如小游戏就没有 DOM/BOM的概念,也没有全局的 document/window对象。

小游戏的入口为 game js文件,语言为 Javascript,但有一些限制,比如禁止执行动态代码,因此 eval、new Function等能力是不支持的。配置为 game.json,可以配置横竖屏、接口超时等参数。js里面可以组合 wx API的能力来实现游戏逻辑, 非代码类的资源应该尽量放到 cdn,减少整个代码包打包后的大小,以加快用户首次进入时的速度,微信对首包的大小目前限制为 4MB。

小游戏能力概览(小游戏能力在不断扩充中,最新、完整能力可关注我们的开发文档):

如何开发一款小游戏?

小游戏的核心逻辑的开发过程和传统的端游、页游以及现在的手游,并没有多大区别。这里会着重介绍一下怎么更好的利用微信小游戏的平台开放能力,包括选择小游戏引擎选择、设备 /环境适配、微信登录、缓存、开放数据域、分享、支付、性能、版本更新机制、运维这几个部分。

选择小游戏引擎

微信跟引擎商也有比较密切的合作,一般现在的游戏引擎都会支持发布到多个平台,对微信小游戏这个新平台而言,已经有一部分引擎做了适配,比如 Cocos Creator、Egret Engine以及 LayAir Engine。适配的主要工作,类似之前提到的 weapp-adapter,把 wx API的能力,和引擎衔接起来。比如引擎一般会把小游戏平台和 webview平台对标,适配过程就是把 wx API对应到 webview的能力,同时把只存在于 webview能力的依赖去除,比如不再依赖 BOM、DOM。

设备 /环境适配

微信本身运行在不同 OS平台,如 iOS、Android,而不同平台又运行于不同的物理设备。运行于微信之上的小游戏,自然就面对不同类型设备和环境的适配。当然能力上,小游戏平台已经尽量消除了它们的区别。但仍然有一些工作需要开发者去针对性的优化,比如高分辨率屏幕,可以提供更高清的画质。小游戏会有 API提供获取屏幕的宽高、设备像素比等能力。小游戏开发完成后,在开发者工具也可以发起真机测试的请求,微信提供了不同设备的测试集群,帮助开发者提前去发现问题。基础库提供的 wx API本身是一个不断迭代更新的过程,对于使用了新能力的小游戏,需要做低版本兼容。比如在检测到不支持新 API的低版本允许有损服务用户。同时,如果某个低版本的用户占比较少,可以考虑在 mp.weixin.qq.com管理后台直接配置小游戏要求的基础库最低版本,当然也意味着这一部分用户在接触到这个小游戏时,微信客户端会弹出一个要求用户更新到微信新版本才可使用该小游戏的提示,如果他不更新,你就可能失去了这个用户。

微信登录

小游戏的登录过程,跟小程序是类似的。需要用户自己去定义登录状态。appsecret/session_key代表的是小游戏开发者和微信平台之间的一种信任约定,比如支付、上报托管数据,平台方需要验证 access_token(只有 appsecret才能换得到),和用户相关的还要验证 session_key的签名,才能保证请求来自于小游戏开发者 /用户,而不是恶意的第三方和随意捏造的用户。access_token是一种应用态的 access_token,和用户无关,需要保证全局维护一份,应该有一个中控的模块去保证 access_token有效,同时在有效期内直接使用本地 cache的 access_token,而不是每次使用都去生成新的 access_token,否则可能遇到调用频率限制的错误而影响服务。切记 appsecret/session_key不要放到前端代码中去,否则可能会被坏人利用损坏小游戏开发者 /用户的权益。

缓存

缓存类型包括数据缓存和文件缓存两类。数据缓存即 key-value存储,适合结构化类型的小数据存储,上限为 10MB。文件缓存提供了一个完整的文件系统 API,包括目录 /文件的增删改读,适合针对经常使用的网络资源做本地缓存,上限是 50MB。

和浏览器不同的是,微信只提供了基本的存储管理能力,并不对存储什么,和存储满时删除什么做一些操作。开发者自行灵活定义缓存以及淘汰策略,比如对经常访问的资源存储到文件系统以及在文件存储满时,清理一些最近不常访问的文件。

开放数据域

开放数据域是一个封闭、独立的 JavaScript 作用域,和执行游戏逻辑的环境——称为“主域”隔离。其目的是在保证用户隐私的前提下开放用户数据给第三方,提升小游戏的整体用户体验。以下为物理视图,主域的入口为 game.js,开放数据域则是一个独立的目录,其入口文件为 index.js:

主域和开放数据域的通信受到严格的管制,基本原则是只进不“出”。

只进:允许外部的数据进入开放数据域,即主域可以随时 postMessage到开放域,以及开放域引用主域准备好的本地资源

不“出”:不允许开放数据域的数据被上传到第三方服务器去。因为开放数据域里面,index.js是可以直接访问到用户敏感数据的,比如同玩好友数据。当然最终开放数据域需要 index.js在综合各种数据后把数据以图形图像的方式渲染到 sharedCanvas上,在主语 sharedCanvas允许 draw到主域的上屏 Canvas上,最终用户会在显示屏上看到 game.js画出来的好友排行榜、群排行榜或好友超越等社交互动信息。

目前开放数据域仅支持 2D渲染模式。

分享

包括自定义分享和系统菜单分享,可以分享到群聊、单聊。也可以把分享上下文与特定的群关联,实现一些群 PK、群排行榜的场景。分享是一把双刃剑,需要谨慎使用,一方面避免过度骚扰用户 /群聊,另一方面增强社交互动提供好的游戏体验,需要找到一个合适的平衡点。

支付

小游戏在安卓下支持虚拟支付,它的方式目前只有一种:即货币托管的方式。主要分为 2个流程:

  1. 充值:RMB -> 游戏币,这里开发者只需要拉起支付的流程,平台负责把用户 RMB兑换成对应的游戏币,存储到用户对应的游戏帐号上
  2. 使用游戏币购买道具:开发者可以扣除对应的游戏币,给用户发放游戏内道具,扣除游戏币的过程需要有一定的事务机制,去保证在网络异常的情况下交易正常。扣除游戏币的接口支持根据订单 id去重,意味着网络超时等情况下,开发者可用同样的订单 id去重试扣除,直至返回明确的响应。

以下为简单时序图,部分角色针对开发者无需关心的部分做了相应简化处理:

性能

小游戏常见的性能问题,一般是内存造成的。如果内存占用太多会被微信客户端主动关闭,因此开发者在用户游戏过程中要及时释放不再使用的内存(js代码去除引用,或主动调用对应资源的释放接口,如果有的话),特别是 Canvas和 Image类大型对象,同时可以主动调用 wx.triggerGC触发底层回收对应资源。

对于和游戏逻辑相对独立的工作,可以考虑在 worker中去实现,小游戏提供了独立的 worker线程执行 js逻辑的能力。

版本更新机制

小游戏启动的过程分为冷启动和热启动。冷启动是指内存中无该小游戏的运行实例的情况下,启动小游戏的过程;热启动是指小游戏的运行实例在内存中还存在,只是暂时切换到了后台,这时用户再次触发小游戏回到前台的过程。

小游戏会在冷启动时检查小游戏的版本,如有新版本,在下载回本地后,下一次冷启动即可使用最新版。当然,我们也提供了 API可以供开发者决策在有版本可用时,是否需要强制更新:

运维

mp.weixin.qq.com管理端提供了发布、灰度发布、回滚、停服等能力,可以充分利用平台已有的能力。

特别提醒,小游戏有完善的后端监控,可以通过“运维中心”开启,比如脚本错误监控(脚本错误主要由运行过程中未捕获的异常触发,需要重点关注。该类异常,可能会导致用户小游戏前端的 js逻辑暂停执行):

爹说的都是真理幻想设计师回答于

小程序的开发模式是一种类 Web的模式,它的前端和一般的 H5的前端相似,但和 JavaScrpit开发比起来的会简单很多,这点得益于小程序的实现原理和架构。下图是程序的基本架构图,它的上层分两个板块,一块是视图层,也是 WebViews,另一块是逻辑层,也就是 AppService,这两层在两个不同的线里面进行处理,跟传统的 web有根本性的差异。

传统的 Web渲染时,如果逻辑里面有很复杂的处理,往往会导致界面出现卡顿的现象。小程序没有这个问题,如果没有调用渲染,不会导致界面的流程度下降。不过,由于视图层和逻辑层在不同的线程里面,这两层不能进行直接的交互,必须通过一些手段实现交互,微信采用 JSBridge实现 JS的运行环境和原生系统的相互调用,当用户在界面上进行操作时候,会触发相关事件,传递到原生 Webviews,再到逻辑层。

下图是小程序的渲染流程图,编译打包的阶段,编写小程序时需先编写一个 WXML的代码,通过 WCC的编译工具,进入 WAWebView,用户运行小程序时,会和逻辑层传入的数据做一个编译,渲染成最终的界面,下图是一个局部更新的过程。

我要飞别拦我码农回答于

先不说搭建环境,我想一个问题,能不能通过Serverless无服务器函数去搭建一个小程序呢?这样入门也简单。

风雨交加不会踢球的营销狗不是好厨子回答于

小程序开发很简单啊,这有什么学的》=。

御姐万岁回答于

马住,等下看,最近我也开发小程序,看看有没有什么好的方案。。。。

742512027cdb不要轻易地考验人性回答于

其实我也是小白,就想看看到底怎么做的,先关注问题了~

所属标签

可能回答问题的人

  • 嗨喽你好

    7 粉丝480 提问8 回答
  • 人生的旅途

    10 粉丝484 提问7 回答
  • uncle_light

    5 粉丝518 提问7 回答
  • 无聊至极

    4 粉丝504 提问6 回答

扫码关注云+社区

领取腾讯云代金券