Temporary failure in name resolution

Temporary failure in name resolution

在谷歌中搜索标题内容可以搜到大把到内容，大概到意思就是dns配置错误，域名解析不了等等等等。

但是能把问题直接定位到这个简单到标题到人才是真正能解决问题到人。

小猪前些天就对着这些报错不知所措：

more >>

展开全文 >>

使用校验文件的方式来验证域名的所有者

今天小猪在查看小程序的文档时发现现在微信支持将传统二维码的微信扫描事件跳转到小程序了。

具体文档为：https://mp.weixin.qq.com/debug/wxadoc/introduction/qrcode.html

大概意思就是很多二维码是在微信小程序出生之前就已经出生了，所以原二维码可能并没有做一些特殊的设置来让微信来进行处理。如果当时的二维码的内容是一个网页地址，那么现在开发者可以设置一些规则将使用“微信扫一扫”功能扫描该二维码时跳转到指定的小程序而不是之前的网页地址了。

惊喜不惊喜？意外不意外？

more >>

展开全文 >>

修改你的路由器地区来提高WiFi的信号强度

在小猪的认知当中，路由器并没有什么大的技术含量，无非就是一个拨号的功能，在大学之前的时候宿舍都是用的有线路由，对无线路由的各种参数也是知之甚少。因为读书时，学校的网络都是需要通过连接宿舍的端口，然后通过星空互联客户端来拨号，拨号好了之后才可以进行计时的上网。

more >>

展开全文 >>

王者荣耀中的点券能干些什么？

每个游戏都需要有自己的盈利模式，有的是靠卖点卡，有的是靠卖宝石，还有的是靠卖皮肤，有的干脆直接全卖。

王者荣耀这手游这两年是火的不行了，小学生们都能上手的游戏。人群集中的地方、公交、地铁、随地都能看到有人横着手机在王者峡谷里穿行。

这个游戏的盈利模式的是什么？

充值点券啊，点券能干嘛？点券能干游戏中的金币能干的所有事情，金币不能干的事情我也能给你办了……

惊喜不惊喜？意外不意外？

more >>

展开全文 >>

跟着小猪来做小程序开发吧——分享页面到微信群或者好友

今天得到消息小程序开放了分享到微信群的更多功能，正好小猪前一段时间因为特别的忙而把本系列文章给耽搁了一点，期间就在想下面怎么来写这一系列的blog。今天正好就以此来开始吧。

先说点

小猪目前用的最多的小程序的分享是在骑行了摩拜单车以后在结算页面有一个分享出去抢免费骑行天数。

其实在此之前公众号的分享已经做的挺成熟了，用户可以根据指引分享自己独特的链接出去，被分享者打开的链接是带着分享者的信息的。这样的页面可以根据程序逻辑来做很多事情，例如：为自己拉票，分享自己的经验等。

可是在用户点了公众号的分享链接之后程序是不会知道用户到底是从哪来的，是从聊天窗口还是朋友圈？是从群聊天还是个人聊天？

小程序先开放了这个接口
正如官方解释所说：

当用户在群聊中点击小程序的分享卡片，开发者可获取群 ID 和群名称，更好地针对群场景提供个性化服务。

再如官方文档中的说明：

通常开发者希望分享出去的小程序被二次打开的时候能够获取到一些信息，例如群聊名字或者是群的标识。现在通过调用 wx.showShareMenu 并且设置 withShareTicket 为 true ，当用户将小程序分享到任一群聊之后，可以获取到此次分享的 shareTicket

官方文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html#onshareappmessage

分享动作 onShareAppMessage

在公众号的页面里，很久之前程序是可以通过调用接口来直接引导用户分享页面的。后来腾讯对此做了限制，只能通过页面的右上角的目录按钮来点击分享。

在小程序里同样有该限制，而且必须要在定义了Page对象的onShareAppMessage函数之后，右上角菜单才会显示对应的“分享”按钮。

1
2
3
4
5
6
7
8
9
10
11
12
onShareAppMessage: function \(\) {
    return {
        title: '这里是机智life小程序',
        path: '/page/index/index?id=123',
        success: function(res) {
        console.log(res)
      },
      fail: function(res) {
        console.log(res)
      }
    }
  }


运行程序结果可看到:

定义返回ticket ：wx.showShareMenu

使用如下代码，来定义在回调里是否带上shareTicket参数，

1
2
3
4
5
6
7
8
9
10
11
12
13

wx.showShareMenu({
  withShareTicket: true,
  success: function (res) {
    // 分享成功
    console.log('shareMenu share success')
    console.log(res)
  },
  fail: function (res) {
    // 分享失败
    console.log(res)
  }
})

如下图，

可见ShareTickets是个数组，也就是可以将页面同时分享到多个群，每一个群对应一个shareTicket。使用shareTicket可通过wx.getShareInfo接口获取本次的分享信息。

获取本次分享的群信息：wx.getShareInfo

使用下列代码来获取群信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
onShareAppMessage: function \(\) {
  return {
    title: '这里是机智life小程序',
    path: '/page/index/index?id=123',
    success: function (res) {
      console.log(res.shareTickets[0])
      // console.log
      wx.getShareInfo({
        shareTicket:res.shareTickets[0],
        success:function(res){console.log(res)},
        fail:function(res){console.log(res)},
        complete:function(res){console.log(res)}
      })
    },
    fail: function (res) {
      // 分享失败
      console.log(res)
    }
  }
}

运行程序，分享到一个测试群(在使用了showShareMenu接口之后，再次点击右上角的分享之后，《微信web开发者工具》为我们建立了几个随即名称的群列表供测试)，可以看到运行结果：


从上图中可以看到额外的数据：iv、roomTopic、rawData、signature、encryptedData 其中，roomTopic字段就是分享的群的名称.

如果想获取该群的ID，那么可以通过之前小猪介绍的跟着小猪来做小程序开发吧——解密CryptedData 来解密encryptedData。

解密完之后可以看到openGId和之前已经存在的roomTopic。

大功告成。

在手机上运行查看下效果：

展开全文 >>

跟着小猪来做小程序开发吧——表单

前言

在上两篇文章中小猪介绍了模板消息的使用情况，期间因为小程序模板消息的限制，在非支付场景下想使用模板消息那么必须使用微信小程序的表单来获取formId，这样就强制限制了必须有用户进行交互的情况下才可以使用模板消息功能，防止了小程序的模板消息功能被滥用。

这一篇文章介绍下小程序的表单相关。

基础

稍微熟悉HTML的读者肯定知道html 的表单，微信小程序基于html程序，但是限制了原html表单的使用，只封装了我们常用的组件和属性。这样即防止了html表单的复杂变化，也提供了常用的组件功能。

今天小猪简单介绍几个常用的表单组件。

组件

官方文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/>提交。

表单组件用来提交表单，微信小程序允许我们为表单添加如下属性

属性名 类型 说明
report-submit Boolean 是否返回 formId 用于发送模板消息
bindsubmit EventHandle 携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
bindreset EventHandle 表单重置时会触发 reset 事件

上述的bindsubmit属性和bindreset属性都可以绑定一个js的事件函数，然后在用户点击提交和重置按钮时触发：例如下面的表单和对应js代码：

1
2
3
4
5
6
7
8
9
10
11
12
//<form bindsubmit="formSubmit" bindreset="formReset">
//<button formType="submit">Submit</button>
//<button formType="reset">Reset</button>
//js
Page({
  formSubmit: function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function\(\) {
    console.log('form发生了reset事件')
  }
})

目前小程序支持如下的标签:

|- 标签名- |-说明- |
|—|—|：
|button |按钮|
|form |表单|
|input |输入框|
|checkbox| 多项选择器|
|radio |单项选择器|
|picker |列表选择器|
|picker-view |内嵌列表选择器|
|slider |滚动选择器|
|switch |开关选择器|
|label |标签|

建议读者分别写上这些标签，然后提交数据比对下具体的属性值。

例如下面的表单

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch"/>
  </view>
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>

  <view class="section">
    <view class="section__title">input</view>
    <input name="input" placeholder="please input here" />
  </view>
<view class="section">
  <view class="section__title">地区选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>

  <view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <label><radio value="radio1"/>radio1</label>
      <label><radio value="radio2"/>radio2</label>
    </radio-group>
  </view>

  <view class="section section_gap">
    <view class="section__title">checkbox</view>
    <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

配合下列js代码：

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

var app = getApp\(\)
Page({
  data:{
    array: ['美国', '中国', '巴西', '日本'],
    objectArray: [
      {        id: 0,        name: '美国'      },
      {        id: 1,        name: '中国'      },
      {        id: 2,        name: '巴西'      },
      {        id: 3,        name: '日本'      }
    ],
    index: 0,
    date: '2016-09-01',
    time: '12:01'
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindDateChange: function(e) {
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function(e) {
    this.setData({
      time: e.detail.value
    })
  },
  formSubmit: function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function\(\) {
    console.log('form发生了reset事件')
  },
  onLoad:function\(\){
      console.log('sform load')
  }
})

到界面上简单做几个输入值，点击提交按钮，看看后台对应获取到的值大概为：

1
2
3
4
5
6
7
8

Object{
    switch: true, 
    slider: 29, 
    input: "smallerpig.com", 
    radio-group: "radio2", 
    checkbox: Array[1]
    }

展开全文 >>

跟着小猪来做小程序开发吧——体验模板消息

官方文档地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#使用说明

前言

在上一篇结束时小猪本打算这一篇使用falsk来做后端存储formId然后走标准的小程序开发流程来实现模板消息的功能。

但是后来仔细想想，如果读者本身自是想做小程序开发，对后端开发并不感兴趣，或者后端框架也不一定是基于Python的Flask，那其实对是否使用flask来做后端是并不关心的。

所以小猪这一篇开始，能不用后端的就不用后端，因为小程序框架本身已经为我们封装了wx.request接口来访问网络了。我们可以方便的使用这个接口来代替服务器来做请求。

准备工作

设置微信后台的request合法域名

这个设置是用来限制我们的小程序中使用wx.request接口时可以调用哪些域名来进行访问，一般而言我们配置我们自己的域名。
因为本篇文章需要在小程序内部调用发送模板消息的接口，所以需要将https://api.weixin.qq.com/加入到合法域名里。

然后到微信《微信web开发者工具》里面的项目tag里刷新配置信息，如果不刷新的话可能会出现下述情况：

获取access_token

获取access_token的方法小猪很久之前就有单独的文章介绍过。和小猪一起搞微信公众号开发—获取Access_token

不过这里我们使用的是wx.request接口来请求，所以我们直接使用调试的方法：
1. 打开网址https://mp.weixin.qq.com/debug/，确认选择的调试接口为获取access_token
2. 属于我们的appid 和secret值。
3. 点击调试,获取数据，在下面的返回框里找到对应的access_token值，并取出，这个值在两个小时之内是有效的。

获取openid

直接使用跟着小猪来做小程序开发吧——获取用户Openid的方法来获取openid。

使用模板消息id

在微信小程序后台的模板消息栏里添加合适的模板消息，并记录其对应的模板ID。

开始编写代码

因为我们只是为了体验下小程序的模板消息，所以我们把上面获取的信息先临时的保存在小程序的全局环境里：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//app.js
App({
  onLaunch: function \(\) {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now\(\))
    wx.setStorageSync('logs', logs)
  },
  //…… 省略了其他代码
  globalData:{
    userInfo:null,
    openid:'oWv370DkivlAs-LPrxKKvQ9KP98w',
    appid:'wx8fa41e5f33e****',
    access_token:'********'
  }
})

然后在对应的表单页的逻辑代码里sform.js：

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

var app = getApp\(\)
Page({
  data:{
    formId:null,
    template_id:null,
    openId:null,
    msg:null
  },
  formSubmit: function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.formId)
    this.orderSign(e)
  },
  formReset: function\(\) {
    console.log('form发生了reset事件')
  },
  onLoad:function\(\){
      console.log('sform load')
  },orderSign: function (e) {
    var fId = e.detail.formId;
    var that = this;

    var l = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + app.globalData.access_token;
    var d = {
      touser: app.globalData.openid,
      template_id: 'quFqMrHJnAHiVwyfCXrK_EGbHAvtOy9UdIDhP-1l5xY',//模板消息id，
      page: '/pages/index/index',
      form_id: fId,
      data: {
          "keyword1": {
          "value": "主题1111",
          "color": "#4a4a4a"
        },
        "keyword2": {
          "value":new Date\(\).getDate\(\),
          "color": "#9b9b9b"
        },
        "keyword3": {
          "value":"地点是……",
          "color": "#9b9b9b"
        },
        "keyword4": {
          "value": "描述一下这这是测试代码",
          "color": "#9b9b9b"
        },
        "keyword5": {
          "value": "备注信息。",
          "color": "red"
        }
      },
      color: '#ccc',
      emphasis_keyword: 'keyword1.DATA'
    }
    wx.request({
      url: l,
      data: d,
      method: 'POST',
      success: function(res){
        that.setData({'formId':fId,'openId':app.globalData.openid,'template_id':d.template_id})

        that.setData({'msg':res})
        console.log("push msg");
        console.log(res);
      },
      fail: function(err) {
        // fail
        console.log("push err")
        console.log(err);
      }
    });
  }
})

对应的页面代码sform.wxml：
`


checkbox

页面代码里为了方便调试我们加上了一些调试信息。
上述代码逻辑很简单，根据主要就是获取到formid之后组装调用模板消息的必要信息，然后调用微信模板消息API，调用成功之后将信息反馈到小程序界面。

代码编写完成之后，转到《微信web开发者工具》的项目tag，点击预览按钮，编译上传完成之后微信扫描二维码就可以体验。
点击提交表单时可看到我们的服务通知窗口里有了消息推送:

展开全文 >>

跟着小猪来做小程序开发吧——获取formId

接下来的几篇小猪将围绕模板消息推动的功能分别向读者介绍小程序的几个功能

今天要介绍的是获取formId

为什么要获取formId

在回答这个问题之前先简单的介绍下微信的模板消息功能。

在一开始，模板消息这个权限可不是所有都公众号都有的，即使你已经交了300块完成了微信认证。只有一些比较牛逼的企业例如说各个银行，人家的需求是类似在每次有交易信息的时候通知用户，这样的功能简直不能太好，人家本来是通过短信通知的，现在通过微信就可以了，而且还不收费，走运营商的短信接口可是需要大概一毛一条的。

所以这个权限是只有走内部流程的。

大概是在13年底的时候微信向所有认证的服务号开放了申请接口。这下模板消息这个功能就彻底开放出来了，每一个公众号都可以发送自己的模板消息，用户会在该公众号的回话窗口看到模板消息。

可是小程序是没有单独的回话窗口的，要使用模板消息，那用户收到的模板消息会在哪呢？

答案是在微信的单独的一个“服务通知”回话框里。

可是如果每一个小程序都可以像公众号那样无限制的发送模板消息的话，那这个“服务通知”的会话框很快就会被占领。

所以必须有一定的限制小程序使用模板消息，微信目前的限制是在如下两种情况下小程序才能够正常的使用模板消息：
1. 在小程序内使用了微信支付接口，
2. 在小程序里用户点击了表单，而且该表单的report-submit属性值为true时。

在上述第二种情况下，小程序框架会给出一个formid，利用这个formId才能正常发送模板消息。

怎么获取formId？

使用类似下面的代码，注意表单的report-submit属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// demo.wxml
<form bindsubmit="formSubmit" bindreset="formReset" report-submit = "true">

  <view class="section section_gap">
    <view class="section__title">checkbox</view>
    <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

然后在对应的js文件里加上：

1
2
3
4
5
6
7
8
9
10
11
12

Page({
  formSubmit: function(e) {
    console.log('form发生了submit事件，fromId为：', e.detail.formId)
  },
  formReset: function\(\) {
    console.log('form发生了reset事件')
  },
  onLoad:function\(\){
      console.log('sform load')
  }
})

单机提交按钮之后可以看到运行结果：

form发生了submit事件，携带数据为： the formId is a mock one

因为我们是在IDE中测试，所以得到的formId值为the formId is a mock one。在真机中我们可以得到一个具体的值，利用该值结合其他参数我们就可以发送模板消息啦。

下一篇小猪将使用flask结合mysql数据库来做一个demo，把这个formId 存储起来供下次使用。

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

"我是小猪.2012年硕士毕业后一直从事软件开发工作,先后从事互联网应用开发,IOT平台开发,目前在上海从事医疗大数据行业. <br><br>\n 这个站点作为个人站点,不定期更新自己的一些技术笔记,技术教程,生活感悟. <br><br>\n 茫茫互联网,我不会主动在任何社区推广本站,如果缘分至此,有幸得到您的拜访,何不为这份缘分留下一些印记."