Victor's Blog

Software Enginner


  • 首页

  • 分类

  • 归档

  • 标签

  • 公益404

初识微信小程序(MiniProgram)

发表于 2018-07-31 | 分类于 Development |

前世今生

需求故事

普通人活着,需要哪些服务?

一个人的一天:
早上出门打车,交通服务;
中午点外卖,订餐服务;
晚上吃完饭看电影,订票服务。
这些服务都相对高频,微信已经集成,但张小龙发现,还有很多低频服务无法覆盖。

如:考驾照,买车,停车,洗车,汽车保养,汽车维修,汽车保险,二手车买卖;租房,买房,出租房产,售卖房产,房屋装修;保洁,水电气宽带维修,家电维修,洗衣,皮鞋皮包皮衣护理,手机维修;美容,美甲,美发;疾病咨询,挂号,问诊;旅游订火车飞机车票,订酒店,订景点门票;
以上这些服务有几项特点:

1
2
3
1. 种类杂而多,与汽车有关的就有5项以上,与房产有关的至少10项左右。
2. 低频,每项你可能一个月只用一两次。
3. 线下服务方便,更多的以线下门店形式存在,线上化程度较低。

为了解决这些问题,微信在2016推出了小程序。

相关纪事

  • 从公众平台发布的第一天起,张小龙应该就有了让每一个公众账号都成为一个小程序的想法。

张小龙朋友圈

  • 现在 iOS 或者 Android 的应用,都是「需要先下载才可以使用」、「每次更新也需要下载」、「不想用的时候需要手动删除」、「应用与应用之间无法进行自由地跳转」,这些特性,决定了「应用」这种形态,也许会是一种过渡阶段的产品。
  • 微信想做的事情,很多公司想做,比如 Google 试图通过硬件(Chrome Book)来做、通过工具型软件(Chrome)来做,甚至是通过系统(Android)来做;UC 在 2012 年也想通过 UC 浏览器首页来做,他们觉得,在移动设备上,浏览器会是入口,结果当然是没成功,UC 浏览器首页现在成为了一个今日头条,百度也做,但最后都…。百度没做成,UC没做成,大抵是因为他们都没有微信这样牛逼的条件——几乎全中国的主要人群都有,平均打开次数和使用时长不可超越。

小程序是什么

  • “小程序非常接近于PC时代的网站的服务,网站服务不同于公众号,它更直接。大家想象一下,把小程序看作是PC时代的网站的话可能更好理解。”—–张小龙
  • 小程序就像PC时代的网站,不需要下载、安装,信息触手可及,用完即走,无需卸载。Web 形态的产品,会是更加「互联网」的一种形态,因为它具备这些特性「无需下载即可使用」、「自动更新」、「关闭即删除」、「网站与网站之间可以自由跳转连接」
  • 它只需要静静的在那里,等着用户来用就好了。—-张小龙
  • 很有可能会是未来移动互联网应用的主要形式

小程序的“小价值”

用户角度

对于用户来说,小程序触及到了PC网页、公众号、H5、APP无法触及到的地方,概括来说它诞生就是帮助用户解决一些特殊需求的,比如在用户没有时间、想控制手机内存空间、不想下APP等等“尴尬”的时候,小程序就可以发挥它的价值了,概括起来有三点:

  • 使用刚需低频服务时。小程序降低了低频服务类APP的使用门槛,需要使用时打开小程序,用完了就可以关掉,不会一直占手机内存,不想用了还可以删掉。这用完即走的特点正好满足用户使用低频服务类APP时的需求,比如要买车票时打开小程序,买完票就关闭它,等要用时再打开,避免APP一直在手机里占内存却又很少用。

  • 使用线下的服务时。小程序在线下的价值是最值得关注的,因为用户在线下消费的需求正是“快捷”、“灵活”、“用完即走”。比如在餐馆点菜,只需扫描二维码,就可以接入小程序,立马就能完成点菜,不必下载APP,也不必关注公众号,也不用排队等餐馆的服务员,同时加载速度比H5快,付款方式比H5方便,对用户来说,可以说是最方便的方式。

  • 满足特殊场景下的个性化需求时。个性化的需求可能只会持续一小段时间,而为了这一小段时间要去下载APP常常让用户觉得心累,比如大家肯定都有这样的遭遇,今天想看这部电影,下了一个播放器,明天想看那个电影,又下了另一个播放器,这时候如果使用小程序看电影,就可以完美切换了,不必在手机里下一堆视频播放器。

APP角度

结合小程序对用户的价值来看,小程序对于APP来说有好也有坏。

  • 对于低频率使用还没发展起来的APP来说,小程序是一个好事情,因微信提供较便宜及容易使用的资源,与数以百万计的移动用户接触。因为对这些企业来说,要么反正无法拥有自己的APP,要么有APP但是没什么波澜,APP本身可使用的频率也比较低,而他们如果用了小程序,就会增加用户时间,增加营销机会,先利用小程序进行营销,吸引一部分用户,再引流到APP当中,所以对它们来说小程序不但不是打击反而是有价值的平台。
  • 对于高频率使用的APP 来说,它们虽然没有被卸载之忧,但需要在损失一定可营销、高体验的用户时间,与多一个渠道带来的利益之间权衡,因为谁也不知道小程序会成为他们的渠道,还是说他们为小程序做嫁衣。
  • 而对于中间的夹层,也就是使用频次一般,简单的、工具类APP 来说,小程序也许一个巨大打击,上文提到,小程序最适用的场景就是“低频”“服务”“刚需”,那么小程序很可能会抢掉此类APP的用户。

其他

  • 对于开发者而言:微信开放了自身能力和部分关系链,只要开发者找准了微信生态中细分用户场景,就能做更好地服务,微信将庞大的用户导流给开发者,还能轻松为开发者提供用户的喜好等信息。
  • 对于微信而言:架设了一个足够轻的插件桥梁系统,可以服务于巨大的社交容器,让各种关系链和服务的通道更加舒畅,提升了用户体验,也让用户更多留在了微信生态中。
  • 拓展二维码的能力:扫描一个二维码就能直接打开一个接近原生应用的小程序。

小程序的缺点

  1. 从技术层面来说,小程序的体验不及APP
  2. 从功能体量上来说,小程序不及APP
  3. 从开放性来说,小程序不及APP,不能直接分享到朋友圈,少了一个重要的推广方式。
  4. 不能跳转外链网址,间接影响了小程序的开放性。
  5. 需要像APP一样审核上架,这点比网页即做即发布要麻烦些。
  6. 不能像原生应用一样自由的推送消息(开放性),能进行一些限制内的消息通知。
  7. 使用的小程序多起来后,不方便查找(只有个搜索功能和收藏,不能自定义排序)。也许在微信里面,小程序需要有一个九宫格聚合页面,这个对普通用户来说,才是最直接应用的感受?

小程序六大核心入口

  1. 微信搜索:分精准搜索和模糊搜索。目前只能模糊搜索到一些比较大的、或者有集团层面战略合作的品牌小程序,其他的只能通过精准搜索获取到。
  2. 线下扫码:二维码大家懂🤣
  3. 公号关联:同一主体下的公众号和小程序可以绑定形成唯一的unionid,这样就可以互相跳转、互推模板消息了。
  4. 好友推荐:在微信生态充分使用已有用户的社交关系链,让用户带用户,迅速获取流量的“裂变”。
  5. 历史记录:用过的小程序会在微信主页下拉菜单中,还有”发现”菜单的小程序主页中。
  6. 附近的小程序:基于LBS(基于位置的服务),在搜索页面也可以获取最近的小程序。

小程序特征

在前面的内容中已经基本阐明了小程序的特征:

  1. 概括起来,就是张小龙的十六个字:无需安装、触手可及、用完即走、无须卸载。
  2. 简单来说,就是“轻”量级的应用,尽可能的不骚扰用户,以维护微信整体的用户体验。

小程序的未来

  • 线下:场景和服务。几个例子,同程旅游直接就在景点出放置小程序二维码,游客直接就能在小程序中购票;公交信息查询,公交车站站牌设二维码,等车的时候我可以知道公交车的动态;医院,排队挂号,提供咨询。这里有一个共性,这些场景都是想去用的时候就去用,但是频次又不太高。更深入一点,未来可以将微信卡包、附近的门店与小程序结合起来,实现线下引流、转化、维护的一个完整闭环。
  • 线上:群插件、表单收集。比如公司收集中午吃什么,收集投票信息。另外,在本次授课前我分享了我的社交名片也是一个非常典型的场景。

小程序的能力

  • 宏观来说小程序能做的有

资讯类(图文)应用:今日头条
影音类(多媒体)应用:爱奇艺,QQ音乐,斗鱼直播
电商类(图文+支付)应用:拼多多,有赞
基于位置的服务:滴滴打车,携程,摩拜单车

  • 宏观来说小程序做不了的有

美图秀秀(复杂的图形处理)
抖音/快手(复杂的音视频处理)
完整的聊天应用(不能后台运行和推送)
无法和支付宝接通(废话🤣)
无法直接分享到朋友圈
无法在小程序里放置外链(不同于公众号)
不能分享到第三方软件
嗯…其他的暂时还没想到

开发小程序

体验小程序

请使用微信扫一扫,扫描下面小程序码:

MiniProgram demo

注:下载微信客户端版本号:6.3.27 及以上

介绍

微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

申请帐号

请前往微信公众平台,点击右上角立即注册。

  1. 选择注册的帐号类型
  2. 填写邮箱和密码
  3. 激活邮箱
  4. 填写主体信息
  5. 选择主体类型
  6. 填写管理员信息
  7. 完成注册

开发前的准备

登录小程序管理平台,完善小程序信息。

  1. 绑定开发者
  2. 获取 AppID
  3. 安装微信开发者工具

微信开发者工具

为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

使用小程序调试,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。详情

框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。

  • 响应的数据绑定

框架的核心是一个响应的数据绑定系统。框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。通过这个简单的例子来看:

1
2
3
<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// This is our App Service.
// This is our data.
var helloData = {
name: 'WeChat'
}
// Register a Page.
Page({
data: helloData,
changeName: function(e) {
// sent data change to view
this.setData({
name: 'MINA'
})
}
})
  • 页面管理

框架管理了整个小程序的页面路由,可以做到页面间的无缝切换,并给以页面完整的生命周期。开发者需要做的只是将页面的数据,方法,生命周期函数注册进框架中,其他的一切复杂的操作都交由框架处理。

  • 基础组件

框架提供了一套基础的组件,这些组件自带微信风格的样式以及特殊的逻辑,开发者可以通过组合基础组件,创建出强大的微信小程序。详情

  • 丰富的 API

框架提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。详情

代码构成

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page,它们都是由四种格式文件构成。如下:

  • JSON(*.json 表示配置)
  • WXML(*.wxml 表示模版或结构)
  • WXSS(*.wxss 表示样式)
  • JS(*.js 表示逻辑或行为交互)

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

文件 必填 作用
app.js 是 小程序逻辑
app.json 是 小程序公共设置
app.wxss 否 小程序公共样式表

一个小程序页面由四个文件组成,分别是:

文件类型 必填 作用
js 是 页面逻辑
wxml 是 页面结构
wxss 否 页面样式表
json 是 页面配置

基础库

为了避免新版本的基础库给线上小程序带来未知的影响,微信客户端都是携带上一个稳定版的基础库发布的。

  • 在新版本客户端发布后,再通过后台灰度新版本基础库,灰度时长一般为 12 ~ 24 小时,在灰度结束后,用户设备上才会有新版本的基础库。
  • 以微信 6.5.8 为例,客户端在发布时携带的是 1.1.1 基础库(6.5.7 上已全量的稳定版)发布,在 6.5.8 发布后,我们再通过后台灰度 1.2.0 基础库。

兼容性

小程序的功能不断的增加,但是旧版本的微信客户端并不支持新功能,所以在使用这些新能力的时候需要做兼容。开发者文档会在组件,API等页面描述中带上各个功能所支持的版本号。

  1. 可以通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 获取到小程序的基础库版本号。
  2. 也可以通过 wx.canIUse 来判断是否可以在该基础库版本下直接使用对应的API或者组件。

发布前的准备

如果你只是一个人开发小程序,可以暂时先跳过这部分,如果是一个团队需要先了解一些概念。

  1. 用户身份
  2. 预览
  3. 上传代码
  4. 小程序的版本

代码审核与发布

开发和测试完成之后,就需要将小程序发布给用户来使用了。

  1. 提交审核
  2. 审核信息填写
    • 配置功能页面
    • 测试帐号
    • 完成提交
    • 代码发布

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

注:以上内容均整理自互联网,我只是个搬运工🤣

JSONServer

发表于 2017-04-11 | 分类于 Tool |

简介

  • 零编码
  • 少于30秒
  • Restful API

安装

$ npm install -g json-server

例子

创建 db.json 文件

1
2
3
4
5
6
7
8
9
10
{
"users": {
"status":0,
"msg":"OK",
"result":{
"username":"刘谋",
"age":26
}
}
}

启动

$ json-server --watch db.json


JSONServer

简单3步反编译 Android APK

发表于 2017-04-07 | 分类于 Tool |

简介

需要使用三个反编译工具:

  • 提取资源:apktool
  • 反编译:dex2jar
  • 查看源码工具:jd-gui

apktool

java -jar apktool_2.2.2.jar decode [path]

dex2jar

sh ./d2j-dex2jar.sh -f [path]

注:如果运行出现:d2j-dex2jar.sh: line 36: ./d2j_invoke.sh: Permission denied,请执行这条命令:sudo chmod +x d2j_invoke.sh

jd-gui

jd-gui可以直接打开dex2jar反编译的*.jar文件

jd-gui

Android 中使用系统权限

发表于 2017-03-30 | 分类于 Development |

概述

为了保护系统的完整性和用户隐私权,Android 在访问受限的沙盒中运行每款应用。如果应用需要使用其沙盒以外的资源或信息,则必须明确请求权限。根据应用请求的权限类型,系统可能会自动授予权限,也可能会要求用户授予权限。

声明权限

根据权限的敏感性,系统可能会自动授予权限,或者需要由设备用户对请求进行许可。例如,如果您的应用请求打开设备手电筒的权限,系统将自动授予该权限。但如果您的应用需要读取用户联系人,系统会要求用户授权。用户需要在安装应用(运行 Android 5.1 和更低版本的设备)或者运行应用(运行 Android 6.0 和更高版本的设备)时授予权限,具体取决于平台版本。

开发应用时,您应注意应用何时使用需要权限的功能。通常,在使用并非由自身创建的信息资源、执行会影响设备或其他应用行为的操作时,应用都需要获得相应的权限。例如,如果应用需要访问互联网、使用设备摄像头或者打开或关闭 WLAN,应用需要获得相应的权限。要查看系统权限的列表,请参阅正常权限和危险权限。

您的应用仅需要获得其直接执行的操作的权限。如果应用请求另一应用执行任务或提供信息,则不需要获得相应权限。例如,如果您的应用需要读取用户的地址簿,则需要 READ_CONTACTS 权限。但如果您的应用使用一个 intent 从用户的“联系人”应用中请求信息,则您的应用不需要任何权限,但“联系人”应用确实需要该权限。如需了解详细信息,请参阅考虑使用 intent。

在运行时请求权限

从 Android 6.0(API 级别 23)开始,用户开始在应用运行时向其授予权限,而不是在应用安装时授予。此方法可以简化应用安装过程,因为用户在安装或更新应用时不需要授予权限。它还让用户可以对应用的功能进行更多控制;例如,用户可以选择为相机应用提供相机访问权限,而不提供设备位置的访问权限。用户可以随时进入应用的“Settings”屏幕调用权限。

系统权限分为两类:正常权限和危险权限:

  • 正常权限不会直接给用户隐私权带来风险。如果您的应用在其清单中列出了正常权限,系统将自动授予该权限。
  • 危险权限会授予应用访问用户机密数据的权限。如果您的应用在其清单中列出了正常权限,系统将自动授予该权限。如果您列出了危险权限,则用户必须明确批准您的应用使用这些权限。

请求您需要的权限

以下代码可以检查应用是否具备读取用户联系人的权限,并根据需要请求该权限:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Here, thisActivity is the current activity
if (ContextCompat.checkSelfPermission(thisActivity,
Manifest.permission.READ_CONTACTS)
!= PackageManager.PERMISSION_GRANTED) {
// Should we show an explanation?
if (ActivityCompat.shouldShowRequestPermissionRationale(thisActivity,
Manifest.permission.READ_CONTACTS)) {
// Show an expanation to the user *asynchronously* -- don't block
// this thread waiting for the user's response! After the user
// sees the explanation, try again to request the permission.
} else {
// No explanation needed, we can request the permission.
ActivityCompat.requestPermissions(thisActivity,
new String[]{Manifest.permission.READ_CONTACTS},
MY_PERMISSIONS_REQUEST_READ_CONTACTS);
// MY_PERMISSIONS_REQUEST_READ_CONTACTS is an
// app-defined int constant. The callback method gets the
// result of the request.
}
}

注:当您的应用调用 requestPermissions() 时,系统将向用户显示一个标准对话框。您的应用无法配置或更改此对话框。如果您需要为用户提供任何信息或解释,您应在调用 requestPermissions() 之前进行,如解释应用为什么需要权限中所述。

处理权限请求响应

当应用请求权限时,系统将向用户显示一个对话框。当用户响应时,系统将调用应用的 onRequestPermissionsResult() 方法,向其传递用户响应。您的应用必须替换该方法,以了解是否已获得相应权限。回调会将您传递的相同请求代码传递给 requestPermissions()。例如,如果应用请求 READ_CONTACTS 访问权限,则它可能采用以下回调方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Override
public void onRequestPermissionsResult(int requestCode,
String permissions[], int[] grantResults) {
switch (requestCode) {
case MY_PERMISSIONS_REQUEST_READ_CONTACTS: {
// If request is cancelled, the result arrays are empty.
if (grantResults.length > 0
&& grantResults[0] == PackageManager.PERMISSION_GRANTED) {
// permission was granted, yay! Do the
// contacts-related task you need to do.
} else {
// permission denied, boo! Disable the
// functionality that depends on this permission.
}
return;
}
// other 'case' lines to check for other
// permissions this app might request
}
}

注:系统显示的对话框说明了您的应用需要访问的权限组;它不会列出具体权限。例如,如果您请求 READ_CONTACTS 权限,系统对话框只显示您的应用需要访问设备的联系人。用户只需要为每个权限组授予一次权限。如果您的应用请求该组中的任何其他权限(已在您的应用清单中列出),系统将自动授予应用这些权限。当您请求此权限时,系统会调用您的 onRequestPermissionsResult() 回调方法,并传递 PERMISSION_GRANTED,如果用户已通过系统对话框明确同意您的权限请求,系统将采用相同方式操作。


https://developer.android.google.cn

Cordova Get Started Fast

发表于 2017-03-22 | 分类于 Hybrid |

cordova

Overview

Mobile apps with HTML, CSS & JS
Target multiple platforms with one code base
Free and open source.

  • Reusable code across platforms
  • Support for offline scenarios
  • Access native device APIs

Installing Cordova

npm install -g cordova

Create a project

cordova create <path>

Add a platform

cordova platform add <platform name>

Run your app

cordova run <platform name>

Common next steps

  1. Read the docs
  2. Add a Plugin
  3. Customize app icons
  4. Configure Your App

http://cordova.apache.org

Hexo 简单5步搭建个人博客

发表于 2017-03-15 | 分类于 Blog |

hexo

简介

快速、简洁且高效的博客框架。而且具有以下特征:

  • 超快速度
  • 支持 Markdown
  • 一键部署
  • 丰富的插件

安装

$ npm install -g hexo-cli

初始化

$ hexo init blog

切换目录

$ cd blog

生成静态文件

$ hexo generate

运行服务器

$ hexo server -s


https://hexo.io

Victor Zheng

Victor Zheng

Write the Code Change the World

6 日志
4 分类
5 标签
GitHub
© 2018 Victor Zheng
由 Hexo 强力驱动
主题 - NexT.Mist