这周撸了两款小程序,分享一些经验。

本周撸了两款小程序,在这里总结下开发过程中的小经验,希望对大家有用。

小程序端

我们先说小程序要注意的地方。

默认入口转发问题

当一个小程序Page的js文件中存在 onShareAppMessage 方法时,可以触发转发功能,但是通过小程序开发者工具生成的模板中,入口文件的js中并没有此方法,为了发布后方便对小程序进行分享,建议在pages/index/index.js中添加。

当然默认情况下,我们需要点击小程序右上角的...才能看到转发,这样并不能对用户起到引导作用,通常的做法是使用一个button,并且设置open-type为share,这样就可以通过按钮启动分享。

但是原生按钮很难看,我们可以设置一个图片,在wxml内的代码一般如下

<button open-type="share"><image src="/images/icon-share.png"></image></button>

当然需要通过wxss将button的样式去掉,背景、边框等等,代码如下

button {

    padding:0;

    margin:0 auto;

    width:70rpx;

    height:70rpx;

    display:block;

    border:0;

    background: transparent;

}

button::after {

    border:0;

}

尤其是对 button::after 要进行设置,否则按钮的边框是无法去掉的。

关于登录

关于小程序登录逻辑都差不多,从小程序发一个请求(含code)给服务器代码,服务器通过code换取open_id和session_key,其中open_id我们需要存储,用来表示用户身份,session_key用来获取用户基本信息时解密使用。

当服务器端进行了存储后要生成一个key,将其返给小程序,以后小程序凡是发起需要用户认证的请求,都带这个key用来判断用户身份,在yii2中,这个key就是我们restful中的access_token。

以上是关于小程序登录的前后台逻辑,如果你使用yii2类框架,很多都内置了,并不复杂。

但是这里还有几个问题

1. 小程序端何时进行登录逻辑?

2. 发起请求时access_token过期了如何处理?

小程序端何时进行登录逻辑?

在登录判断上,我们先进行小程序是否含有access_token来判断,当然即便存在,还需要对checkSession进行一次判断。

var session = Session.get();// 获取access_token

if (session) {

    wx.checkSession({

        success: function () {

        },

        fail: function () {

            doLogin();

        },

    });

} else {

    doLogin();

}

这里Session是对access_token的一次封装。

发起请求时access_token过期了如何处理?

这个问题最常发生的场景就是我们发送了一次需要用户认证的请求,此刻如果服务器端发现收到的access_token已经失效,会返回异常,此刻小程序一般要如何处理那?

我的推荐方式是静默状态的自动登录一次再,先看代码。

if (response.statusCode === 401) {

    Session.clear();

    if (!hasRetried) {

        hasRetried = true;

        doRequestWithLogin();//

        return;

    }

}

我来解释一下这段代码,当小程序发起一次需要用户认证的请求但是被服务器驳回为401错误(一般为用户认证失败),此刻我先清理掉小程序端自身对access_token(Session.clear()方法实现),然后在进行登录后再发起请求(doRequestWithLogin())。

但是我们不能一直在执行请求失败就登录操作,因此可以设置一个开关hasRetried,只进行一次尝试。

客服消息

在小程序开发中,客服消息的重要性不言而喻,它除了作为客服服务外,还作为小程序到微信浏览器的一个渠道,比如本次在[「宝宝爱识图」](https://nai8.me/images/bao-say-qrcode.png)的开发中,我用它来实现将收款微信号到用户的推送工作,这主要是解决在ios端虚拟产品不能进行微信支付事情。

一般的策略是让客户点击客服按钮然后输入一个关键词,服务器端通过客服消息接口识别用户身份,结合关键词给予响应的消息推送。

模板消息

很多人认为很鸡肋的方法,毕竟需要获取form_id和prepay_id后才能下发模板消息,似乎很受限制,但是我们可以建立一个formId的种子表,将尽可能多的用户和后台的行为都采用form表单提交的形式,并且获取formID,对,要变态的多,这样你的formId表数据起来了,以后想发消息的时候用就好了。

关于如何设置能获取formId的小程序表单也很简单,设置report-submit为真即可,如下代码

<form bindsubmit="abc" report-submit="{{true}}">

</form>

然后在js端通过如下代码获取

abc(event) {

    var formId = event.detail.formId;

    xxx

},

尽可能多的。

服务器端

接下来总结下服务器端,我使用yii2的restful组件作为接口支持,关于restful的基本功能请参考yii2官方文档或我之前录制的课程[《Yii2的RESTful讲解》](https://nai8.me/book/view.html?id=13),在这里分享我认为关键的点。

让yii2能解析json的请求内容

默认情况下yii2并不能识别请求中的json格式,而我们小程序在发起请求时喜欢用它,因此我们要对yii2进行一下配置。

config/web.php

'request' => [

    'cookieValidationKey' => 'xxx',

    'parsers' => [

        'application/json' => 'yii\web\JsonParser',

    ],

],

对,在web.php中对组件request增加内容解析yii\web\JsonParser。

用户认证

小程序的登录需要服务端的用户认证配合,当然我使用yii2框架,内置的restful已经支持了,如果你的系统不支持用户认证,可以自行建立access_token的生成机制,具体可以参考腾讯开放的小程序服务端框架wafer。

在yii2的restful中的用户认证使用了行为机制,我们来看下流程代码

// 在需要授权的控制器内

class CardController extends ActiveController {

    public $modelClass = 'app\modules\say\models\Card';

    public function behaviors() {

        $behaviors = parent::behaviors();

        $behaviors['authenticator'] = [

            'class'=>HttpBearerAuth::className(),

            'only'=>[

                'index'

            ],

        ];

        return $behaviors;

    }

    ...

}

就如上面的代码,我们生命index动作是需要用户认证的,并且认证机制为[HttpBearerAuth类型](https://nai8.me/video/detail.html?id=175),在小程序端需要在header内包含如下代码

header: {

'Authorization': 'Bearer ' + access_token

},

当服务器验证通过后,在action的代码内直接使用 **Yii::$app->user->id** 就可以获得用户ID。

ok~

这就是前几天小程序开发过程中给大家分析的点,后续升级过程中会继续分享给大家。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容