小程序开发记录

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 3,283 | 阅读时长 ≈ 13

2020.8

记录

注意事项

  1. text标签不知道哪里的行高，导致元素实际高度了。
    包括text内文本最好不要有换行，空行会单独占据一行。

  2. 全局globalData, 在app 中可以用this.globalData。在其他页面中不可以使用this app.globalData

  3. console.error 不能使用占位符。
    没有console.time, console.timeEnd
  4. getRegExp() 函数用于 wxs 使用正则。
  1. 区分页面环境 微信或者小程序 微信内置浏览器与小程序中的 User Agent 对比
微信小程序的 UA 是和微信内置浏览器 UA 是不同的，后面会多出一小段，特别是最后的“miniProgram”字符串，就是小程序的特别的 UA，
而在 iPhone 系统设备中 UA 都是一致的，小程序和内置浏览器 UA 是没有区别的。

1
2
3
4
5
6
7
// if(navigator.userAgent.match(/(MicroMessenger)/i)){
if(/MicroMessenger/i.test(navigator.userAgent)){
	alert('你正在使用微信访问');
}

// Android.*MicroMessenger.*miniProgram//安卓端的小程序
// iPhone.*MicroMessenger//苹果端微信或小程序

路由/页面跳转

  1. 监听/阻止返回操作。小程序没有该api阻止用户操作。
    可以做到自定义顶部导航栏 返回 -》 主页。

  2. 监听页面/路由跳转wx.onAppRoute(res)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
         openType: 'navigateTo',
         path: 'pages/xx',
         query: {

         },
         page: {
             window: {
                 backgroundColor:'',
                 navigatorBarTextStyle: '',
                 // ... 
             }
         },
         webviewId: 13
         
    }

  3. 页面刷新this.onLoad() 或者this.onReady() 或者 this.onShow()

  4. 小程序分包加载时在ios和android 表现不一致。
    android： 在当前页面loading； ios： 进入分包加载。
  5. 小程序重启。目前没有该api。

    别跟我说wx.reLaunch。有用我就不会提这个问题了
    右上角胶囊三个点—重新进入小程序
    小游戏有。

    分享

  6. 分享小程序卡片 尺寸限制 5:4

    imageUrl| 自定义图片路径，可以是本地文件或者网络图片。支持 PNG 及 JPG，显示图片长宽比是 1:1。| 默认使用小程序 Logo
    https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onshareappmessageobject-object

  1. 分享小程序路径pages前面斜杠不重要，路径要和app.mpx中路径一致。

滚动

滚动视图之滚动到指定元素位置<scroll-view scroll-y scroll-into-view="" scroll-with-animation >
页面滚动。wx.pageScrollTo({ scrollTop: e.currentTarget.offsetTop, duration: 300, selector: '', offsetTop: '', complete: () => {} })
文档 pageScrollTo: https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html

可视区域判断

dom.top 元素距离视窗顶部的距离 注意随着滚动变化。
dom.height 元素的高度。
windowHeight 视窗的高度。

如果元素的top在视窗高度范围内 就证明在可见区域。
if( el.top<windowHeight && top>0 ){ 就可以了判断了 }
再严谨一些 加上元素自身的高度。
if( el.top <windowHeight && el.top+el.height>0 ){

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//屏幕的高度
 var SystemInfo = wx.getSystemInfoSync()
console.log(SystemInfo.windowHeight)

 //元素的高度 
var query = wx.createSelectorQuery();
//选择id
var that = this;
query.select('#yuyue').boundingClientRect(function (rect) {
    console.log('元素的：'+rect.top)
}
// ## 3 判断
if ( el.top <windowHeight && el.top+el.height>0 ){
    console.log('可视区出现')
} else {
    console.log('可视区消失')
}

taro(react)实践

案例：底部提示条。点击滚动到目标元素位置。
刚进入页面获取目标元素的位置（top和height）。页面滚动时根据滚动高度判断目标元素是否在视图内。
而不需要每次滚动的时候去获取目标元素的位置。
<!–
PS: Taro.nextTick 获取的高度是0. 添加定时器300ms，有时拿到的高度也是0.
top位置不保证很精确，但是页面效果很不错。

3、在页面渲染完成OnReady回调，获取元素高度时，如果不加定时器，获取的元素的高度还是没渲染完异步数据前的高度。故需要加定时器
微信小程序如何获取元素的高度
微信小程序 获取元素高度（获取元素节点信息）
微信小程序获取元素高度的方法

一定要在 onReady、ready 生命周期中才能调用小程序 API 获取 DOM。
Taro获取节点信息需要在onReady事件中触发，即便如此，小程序模拟器中测试，也并不是每次都能获取到节点，经过测试，在Taro.nexkTick中可以正常获取。
PS: 本案例并不是onready或者nexkTick的问题。（能获取到节点，但是高度是0，top多少有些偏差。）
–>


虽然小程序中有apiwx.navigateToMiniProgram({aapId, path, extraData,...})
网页sdk有wx.miniProgram.navigateTo，并无提到上面的api。

目前没有支持。如果这个能力支持了，那就疯狂了，不需要前几天发布的小程序无需管理公众号跳转10个小程序了。任意小程序都可以无限跳转了，，，

  1. 小程序web-view的src有长度限制吗？

没仔细研究过：
先说一下各大浏览器url最大长度：
IE : 2803
Firefox:65536
Chrome:8182
Safari:80000
Opera:190000
微信使用的微信内置浏览器（X5内核），你就按照最低的Chrome 8182 也应该够用的吧。具体多少，不知道

这种都有大小限制，建议大量数据通过接口获取，只传入关键参数即可

  1. 微信小程序页面跳转url传参，对象数据过长问题

是URL有特殊字符才截取的吧

  1. 获取小程序页面路径

  2. 查看小程序页面路径（分享出错，页面打不开等时候排错）
    小程序跳转链接获取方式
    1、登陆小程序管理后台，从上方“工具”入口进入“生成小程序码”：
    2、添加需要获取页面跳转链接的小程序:appid 或者名称

    3、添加项目成员微信号：
    相应微信帐号即可在小程序上复制到页面跳转链接：

  3. 调试h5页面：> 开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。

h5页面区分不同的小程序

webview中如何获取小程序appId: https://opendocs.alipay.com/support/01rb3z

  1. url 后面携带 appId 参数
  2. 小程序与webview交互方法

h5页面登录态/cookie同步

小程序没法设置cookie到web-view中

web-view如何使用小程序中的cookie

wx.request会返回http header，取到Set-Cookie这个字段，然后使用encodeURIComponent编码一下，通过url传给web-view,在web-view中通过document.cookie赋值。

小程序中如何模拟cookie
可以参考 一行代码让微信小程序支持 cookie

为什么小程序与web-view与不能共享cookie

小程序的wx.request()是通过jsCore调用系统原生api发起的请求，即便header里带有set-cookie，也不会在web-view对应的’浏览器’中设置cookie，而是由原生应用来处理这个header中的set-cookie，至于怎么操作，要看原生应用了。这个可以参考如何处理 iOS 原生网络请求中的 cookie ？。

比较有趣的是，小程序中的web-view和微信中直接打开的h5，因为用的是同一个浏览器内核，所以，它们的cookie、storage是可以共享的。

SMTC
1
2
3
4
5
6
7
8
9
10
11
utils.request({
　　url: url,
   data: {},
   success: (res) => {
   　　wx.setStorageSync('cookie', res.header["Set-Cookie"]);
   }
});
// 在H5中的处理方法是： 获取 cookie 值并写入。
// let cookie = window.location.href.split('?')[1];
// document.cookie = `jxi-m-sid=${cookie};domain=${host};path=/`;
document.cookie = `cookie=${history.location.query.cookie}`;

二种方案：走统一页面。

cookie安全

二、浏览器中的cookie
三、小程序中的cookie实现
四、Cookie 在网络中的传递
五、性能优化（高频读写）
六、单元测试
七、Cookie安全

path、domin、HttpOnly、Secure、SameSite
小程序中已经做了一些安全措施，比如只能走HTTPS、合法域名需要管理员到微信后台进行配置、Storage只能由写入它的小程序中访问，等等。
因此path、domin、HttpOnly、Secure、SameSite这些字段在小程序环境下的价值没有浏览器环境大，本例中没有使用（懒..），而实际业务场景可以按自身情况决定是否要使用。
#### 白名单机制
前端维护（大小/数量）通常浏览器保持的Cookie数据不超过4k，部分浏览器限制同一站点最多cookie数为20个。
如果业务庞大的话，建议在Cookie基础库做一套「白名单」机制，在白名单内才可以写入，以此防止“非法写入”或“内容超大导致信息丢失”的问题。

后台维护（网关白名单）同样的，建议从网关层面，建立一个“可信cookie”白名单，自动过滤请求中的“非法cookie”字段。

#### 前端防篡改
小程序前端更多是防“误改”————即在操作Cookie过程中，发生了意料之外的修改。通常发生在JS“引用拷贝”特性上，比如前面提到的内存维护一个_Cookies，如果有一个APIgetAllCookies()直接将这份内存版cookies暴露出去，对象引用容易被连带修改。所以cookie基础库需要控制暴露API的能力范围，并对取值进行“深拷贝”。
#### Session
Session机制将用户状态放在了服务端维护，具备更好的安全性，而且目前各种后端对于session的存储和同步都有很成熟的技术方案，有条件的业务应以Session为主做会话保持。

#### 指纹上报
用户访问时生成设备指纹并上报（通常是登录/结算等环节），业务后台配合风控系统，遇到异常请求时下发验证环节。
八、完整小程序实现Demo

百度小程序

小程序Cookie机制: https://smartprogram.baidu.com/docs/develop/api/net/cookie/

小程序Cookie是小程序框架提供的一套完整的Cookie存储、匹配机制，保证小程序间Cookie数据隔离，并完全遵循 RFC6265规范 。小程序开发者服务器可在swan.request请求返回中，使用HTTP Set-Cookie首部HTTP Set-Cookie将相关name/value键值存储到小程序框架中，小程序框架会在相关API和组件进行网络请求时自动匹配并携带name/value键值信息。

web-view网页容器不支持Cookie机制。

判断小程序环境

有micromessenger是微信内置浏览器,有micromessenger和miniprogram的是微信小程序. (ios不适用)
在网页内可通过window.__wxjs_environment变量判断是否在小程序环境，建议在WeixinJSBridgeReady回调中使用，也可以使用JSSDK 1.3.2提供的getEnv接口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// web-view下的页面内
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}

// 或者
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})

修改组件样式

背景：覆盖#shadow-root 中的样式。像一般的框架组件那样通过css 继承/权重去重写组件的样式。
<!–

你这是使用了组件是吧，去组件里直接修改。没组件代码？那就看看他的文档有没有使用外部样式的方法。没有？那不好意思，没法改。 –>

通过class或者style等变量的方式，去组件里面修改组件的样式。

小程序引流app

小结：以上两种方式都是由app 主动发起的跳转，然后小程序才能返回打开app，如果不是由app主动发起的跳转，则不能由小程序直接打开app。所以想要由小程序给app 导量的风骚走位，可能就行不通了。

小程序是不支持主动跳转app的，这个大家应该清楚。只有在场景值1036，1069，1038，1089和1090这几个中才有跳转app的权限。场景值我们可以在app.js的onLunch（options）和onShow（options）中获取，options.scene中获取。
根据场景值条件判断添加 跳转app 按钮。
<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>

微信或者h5页面唤起app

同理下载

开发者工具

设置

请求

wxapp小程序网络请求默认走WebSockets，可以打开页面入参中配置debugChannel=httpDirect，让其走Http请求，从而方便调试。

  1. 接口请求http

PS: 必须是https，且域名访问。

问题

运行等

  1. 微信小程序提示 [渲染层错误] TypeError: Cannot read property ‘replace‘ of undefined

    升级开发工具不行，把 wxml/js 代码一个一个删除想排查问题,最后都删完了还是不行，然后百度发现一个跟我一样的情况的案例，发现人家选择【调试基础库 2.12.0版本】

  2. ./pages/index/index.wxml not found
    同上。调试基础库 改为2.1.8.0 成功了。

  3. [渲染层错误] Framework inner error (expect START descriptor with depth 3 but get FLOW_DEPTH)
    估计也和小程序开发者工具有关系。目前页面展示正常，也有可能部分正常。

  4. routeDone with a webviewId 1 that is not the current page
    微信开发工具中把基础库版本有关。
    后续不知怎么就好了。（解决了一些代码报错）

knowledge is no pay,reward is kindness
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多
0%