171

微信小程序开发总结

 7 years ago
source link: https://juejin.im/post/59c20199f265da0658151cfe
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
2017年09月20日 阅读 6544

微信小程序开发总结

记录下小程序开发过程中遇到的一些问题以及解决方案

原文链接

1. 微信开发者 1.0.0 版本

GET 1351598279.appservice.open.weixin.qq.com/appservice net::ERR_NAME_NOT_RESOLVED

公司的网络是翻墙网络，微信应该是给禁掉了

设置-----> 代理设置 -----> 不适用任何代理，勾选直联网络

2. 对应的服务器证书无效。控制台输入 showRequestInfo() 可以获取更详细信息

小程序数据请求必须是https, 没配证书用于调试可以先在项目设置中选择不校验安全域名、TLS 版本以及 HTTPS 证书

3. 按条件设置class

<text wx:for="{{titles}}" 
  wx:key="{{item}}" 
  class="home-title {{index == activeIndex ? 'active' : ''}}" 
  bindtap='changeClassify'>
  {{item.name}}
</text>

// index == activeIndex classw为 "home-title active" 否则为 "home-title "复制代码

4.循环嵌套

// 普通的单次循环
<text wx:for="{{titles}}" wx:key="{{index}}">{{item.name}}</text>

//循环嵌套时使用 wx:for-item="XXX" 
<view wx:for="{{hotArr}}">
  <view class="classify-title" bindtap="goClassifyPage">
    <text>{{item.name}}</text>
  </view>

  <view class="classify-items">
    <view class="classify-item" wx:for="{{item.data}}"  wx:for-item="cell" wx:key="index">
      <view>
        <text class="classify-item_name">{{cell.name}}</text>
      </view>
    </view>
  </view>
</view>复制代码

5. router 跳转传参及参数获取

//wxml
<text wx:for="{{titles}}" wx:key="{{index}}" bindtap='changeClassify' data-id="{{index}}">{{item.name}}</text>

//js
function changeClassify(e) {
  //
  let id = e.currentTarget.dataset.id;

  //跳转到classify 页面
  wx.navigateTo({
    url: '../classify/classify?id=' + id
  })
}

//classify 页面 获取参数
onLoad: function (opts) {
  console.log(opts.id)
  console.log(this.options.id)
}复制代码

6. 上拉加载更多, 下拉刷新

  • 直接使用小城程序自带方法onReachBottom 、 onPullDownRefresh
  • 如果使用scroll-view组件还可以监听 bindscrolltoupper 、 bindscrolltolower

// 上拉加载更多
onReachBottom: function() {
  if (this.data.next != null) {
    this.setData({ isHideLoadMore: false })
    this.getNextPage()
  }
}

// 下拉刷新
onPullDownRefresh: function() {
  this.refreshData()
}复制代码

7. 组件化 template的使用

对于通用的组件可以抽出一个template

/**
* 1. 给template 设置name
* 2. 组件传过来的值可以直接使用  hidden="{{!isloading}}"
*/
<template name="loading">
  <view class="weui-loadmore" hidden="{{!isloading}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view> 
</template>

// 
/** 
* 使用通用的template 
* 1. 按路径引入
* 2. 设置 is 等于 template的name data="{{isloading}}" 给template的数据
*/
<import src="../template/loading.wxml"/>

<template is="loading" data="{{isloading}}"></template>复制代码

8. 获取用户的UniqueID 以及 openid

UniqueID 以及 openid的获取涉及到用户的敏感信息，返回的数据encryptedData是加密后的数据要提取信息需要对数据进行解密

官网提供了解密的算法，将nodejs的版本拿过来稍作修改即可

  • 下载 cryptojs 放到项目的utils目录下
  • 在utils 目录下新建decode.js 写入以下内容
//utils/decode.js
var Crypto = require('./cryptojs/cryptojs.js').Crypto;

function WXBizDataCrypt(appId, sessionKey) {
  this.appId = appId
  this.sessionKey = sessionKey
}

WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
  // base64 decode ：使用 CryptoJS 中 Crypto.util.base64ToBytes()进行 base64解码
  var encryptedData = Crypto.util.base64ToBytes(encryptedData)
  var key = Crypto.util.base64ToBytes(this.sessionKey);
  var iv = Crypto.util.base64ToBytes(iv);

  // 对称解密使用的算法为 AES-128-CBC，数据采用PKCS#7填充
  var mode = new Crypto.mode.CBC(Crypto.pad.pkcs7);

  try {
    // 解密
    var bytes = Crypto.AES.decrypt(encryptedData, key, {
      asBpytes: true,
      iv: iv,
      mode: mode
    });

    var decryptResult = JSON.parse(bytes);

  } catch (err) {
    console.log(err)
  }

  if (decryptResult.watermark.appid !== this.appId) {
    console.log(err)
  }

  return decryptResult
}

module.exports = WXBizDataCrypt复制代码
  • 在app.js 引入decode.js 对数据进行解密

var WXBizDataCrypt = require('utils/decode.js');

var AppId = 'XXXXXX'  
var AppSecret = 'XXXXXXXXX'

//app.js
App({
  onLaunch: function () {
    //调用登录接口
      wx.login({
        success: function (res) {
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session',
            data: {
              appid: AppId,
              secret: AppSecret,
              js_code: res.code,
              grant_type: 'authorization_code'
            },
            header: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            method: 'GET',
            success: function(res) {
              var pc = new WXBizDataCrypt(AppId, res.data.session_key)
              wx.getUserInfo({
                success: function (res) {
                  var data = pc.decryptData(res.encryptedData, res.iv)
                  console.log('解密后 data: ', data)
                }
              })
            },
            fail: function(res) {
            }
          })
        }
      })
  }
})复制代码

注意：UniqueID 的获取微信开放平台帐号必须已完成开发者资质认证，否则解密后的数据没有UniqueID字段

解密后数据

解密后数据解密后数据

由于公司1.0 版本要求比较简单。 从开发到上线一共用了两天时间，小程序的审核也是出奇的快。下午提交不到两小时就审核通过了。严重怀疑他们没测😂。


report

Recommend

  • 72
    • 掘金 juejin.im 7 years ago
    • Cache

    微信小程序开发完工+问题汇总

    前言 经过将近一个多月的开发,我们团队开发的微信小程序 "出发吧一起" 终于开发完成,现在的线上版本为 2.2.4-beta 版 本文档主要介绍该小程序在开发中所用到的技术,已经在开发中遇到问题的采取的解决方法 原文链接（转载请注明出处）：微信小程序：出发

  • 97
    • 掘金 juejin.im 7 years ago
    • Cache

    微信小程序开发必备神器-Grace

    Grace 微信小程序开发必备神器 Github: github.com/wendux/grac… 特点 支持和Vue一样优雅的数据响应式 支持数据自动更新、更改缓存、批量更新 强大的网络功能 支持全局事件总线 支持跨页面传值 使用 下载：https

  • 73
    • next.36kr.com 7 years ago
    • Cache

    WeGeek 微信小程序开发大赛 - 微信官方举办「WeGeek 微信小程序开发大赛」， 小程序唯...

    WeGeek 微信小程序开发大赛 - 微信官方举办「WeGeek 微信小程序开发大赛」， 小程序唯一信息发布渠道 - NEXT

  • 89
    • 掘金 juejin.im 7 years ago
    • Cache

    微信小程序之-NBA在线直播小程序开发

    wx-nba wechat app for nba live NBA赛事直播、使用小程序实现的一个NBA球赛直播新闻小程序 源码地址: github.com/ecitlm/wx-n… 如何使用 git clone https://github.com/ecit

  • 56
    • 掘金 juejin.im 6 years ago
    • Cache

    微信小程序开发--『狗蛋TV』

    狗蛋TV 狗蛋TV是基于微信小程序开发的一款App。gordanLee每天都会推荐一首歌、一篇文章、一段短视频，每天用十分钟的细碎时光，点燃内心的光明。目前分为音乐，短视频，影评三个模块。 线上开源地址 https://github.com/li

  • 43
    • 掘金 juejin.im 6 years ago
    • Cache

    微信小程序开发BUG经验总结

    小程序开发越来越热，开发中遇到各种各样的bug，在此总结了一些比较容易掉进去的坑分享给大家。 1. new Date跨平台兼容性问题 在Andriod使用new Date(“2018-05-30 00:00:00”)木有问题，但是在ios下面识别不出来。 因为

  • 68
    • 掘金 juejin.im 6 years ago
    • Cache

    小程序开发技巧总结

    前言 最近公司要开发一款电商小程序，匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好，特别是如果之前习惯了Vue开发，突然去开发小程序，感觉很鸡肋。以下是我在开发中遇到的一些问题以及解决方法的总结，仅供参考 引入iconfont 在小程序中引入字体图...

  • 47
    • 36氪 36kr.com 6 years ago
    • Cache

    小程序开发火爆，微信、支付宝官方同时提醒商家别上当

    时下，小程序越来越火爆。近期，先是百度上线了智能小程序，公测快一年的支付宝小程序也开放了首页入口，微信小程序则在首页下拉释放了收藏入口。作为互联网行业的风向标，BAT同时进入小程序赛道，搅热了小程序市场。不少商家希望抓住小程序的流量...

  • 57
    • 掘金 juejin.im 6 years ago
    • Cache

    小程序开发实践总结

    从微信发布小程序以来，各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。我司也不例外，我们整个前端团队这半年来基本上都是在开发小程序。前前后后也开发了四五个小程序了。总觉得要留下点什么，既是记录那些年我们踩过的坑，也是希望大家别再掉坑。 那些年我们...

  • 65
    • blog.parryqiu.com 6 years ago
    • Cache

    微信小程序开发教程 043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能，大大提高微信小程序的开发效率，同时也是微信小程序系列教程的视频版更新。 微信小程序在发布之初没有对 npm 的支持功能，这也是目前很多前端开发人员在熟悉了 npm 生态环...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK