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

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

a563831029a563831029提问于
三进制本科在读回答于

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

入门

运行环境

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

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

回答过的其他问题

如何通俗的了解kubernetes容器编排?

三进制本科在读
推荐
用简单的一张图来回答吧: 📷 删除 首先我们需要明白图中几个意思,从内向外看: container 包含在Pod下,可以是docker镜像。 Pods 在Kubernetes系统中,调度的最小颗粒不是单纯的容器,而是抽象成一个Pod,Pod是一个可以被创建、销毁、调度、管理的最...... 展开详请

React.js:将字符串转换为对象

三进制本科在读
令人奇怪的是,服务器将对象双重编码为​​JSON(编码内部对象然后编码整个事物)。 理想情况下,你已经修复了服务器端,因为他们正在做的事情没有意义,因为JSON支持嵌套对象就好了。 如果必须在客户端上解决问题,则使用JSON.parse将字符串转换为对象。 const att...... 展开详请

如何使用python删除文件夹中几个* .txt文件的前7行?

三进制本科在读
已采纳
您可以使用Python的OS模块从您的文件夹中获取所有* .txt文件的名称。然后,您可以遍历此名称,读取每个文件中的所有行,并使用您要保留的行覆盖该文件: from os import listdir, path path_str = '.' # your directo...... 展开详请

NPM安装错误:解析'... nt-webpack-plugin'附近的JSON输入意外结束:“0”?

三进制本科在读
npm cache clean --force 然后 npm install -g @angular/cli 为我工作... 展开详请

JavaScript中的扩展语法出现意外行为?

三进制本科在读
已采纳
在第一个代码中,您将传播一个包含一个项目的数组,即第零个索引处的字符串: console.log({ ...["hello"] }); 一切都如预期。但是在第二个代码中,你.map首先调用数组,然后传播提供给函数的第一个参数.map - 传播的项不是数组...... 展开详请

xpath extract / text()使用scrapy shell返回空?

三进制本科在读
第一个xpath表达式返回一个Elements列表。你将获得此列表中的第一个项目,即单个<td>元素。 第二个xpath表达式返回相同<td>Elements 的子文本节点列表。你得到的拳头孩子这是一个单一空间:之间的一个<td class="player-name">和<hr...... 展开详请

关于作者

所属标签

扫码关注云+社区

领取腾讯云代金券