h5网页判断微信、小程序环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
export function isWeChatMiniApp() {
  const ua = window.navigator.userAgent.toLowerCase();
  return new Promise((resolve) => {
    if (ua.indexOf('micromessenger') == -1) {
      console.log("不在微信或者小程序中")
      resolve(false);
    } else {
      wx.miniProgram.getEnv((res) => {
        if (res.miniprogram) {
          console.log("在小程序中")
          resolve(true);
        } else {//在微信中
          console.log("在微信中")
          resolve(false);
        }
      });
    }
  });
}

**在网页内可通过window.__wxjs_environment变量判断是否在小程序环境，建议在WeixinJSBridgeReady回调中使用，也可以使用JSSDK 1.3.2提供的getEnv接口。
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

css2选择器

1.li~p 选择li元素之后的每一个p元素

1
2
3
4
5
6
7
8
9
10
11
12
13
li~p{
  font-size: 20px;
  font-weight: bold;
}
<ul>
  <li>111</li>
  <p>222</p>
</ul>
<p>888</p>
<li>333</li>
<div>666</div>
<p class="a">444</p>
<p>555</p>

2.div+p 选择所有紧接着

元素之后的

元素

1
2
3
4
5
6
7
8
9
10
11
div+p{
    font-size: 20px;
    font-weight: bold;
  } 
<div>
  <p>111</p>
</div>
<div>222</div>
<p>333</p>
<i>000</i>
<p>asd</p>

3.ul>li 选择所有父级是

    元素的
  • 元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ul>li{
        font-size: 20px;
        font-weight: bold;
      } 
    <ul>
      <li>111</li>
    </ul>
    <ul>
      <div>
        <li>222</li>
      </div>
    </ul>

记住密码 输入框有黄色背景

1
2
3
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

小程序onshow onload的区别

** 注意：onshow 不管是新打开的页面还是返回的页面，都会执行这个周期函数

小程序和h5页面的交互

解决问题：微信小程序中嵌套h5网页的交互，相互传递参数的问题

使用条件：

客户端 6.7.2 版本开始，navigationStyle: custom 对 组件无效。
web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
基础库 1.6.4 开始支持，低版本需做兼容处理
兼容方法：https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html

使用方法：

1.小程序向网页传值

小程序内打开网页的话，有时需要向网页内传递参数。可将需要带向网页的值通过拼接参数方式实现，然后再在网页内截取即可

1
2
3
4
5
6
<!-- 小程序page -->
<web-view src="http://×××.html?id=123"></web-view>
<!-- 网页 a.html-->
<script>
  		 let id = getUrlParam('id'); 
</script>

2.网页向小程序传值

1.通过url和小程序的转发(分享)方法，将需要传给小程序的值当做参数放在当前url上，小程序中通过点击转发即可获取。这种方法缺点是只能在点击转发(分享)时才可传

1
2
3
onShareAppMessage: function (options) {
      let webViewUrl = options.webViewUrl;//web-view当前的网址
}

2.另外一种是通过使用微信sdk的postMessage方法，然后小程序web-viewd中的bindmessage方法会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 网页 a.html-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// 先postMessage 然后再返回，不然不起作用
        		
<script type="text/javascript">
// 别的框架找对应的方法
            		
wx.miniProgram.postMessage({ data: {foo: 'bar'}})   wx.miniProgram.navigateBack({delta: 1})
        		</script>
<!-- 小程序page -->
<web-view bindmessage="handleGetMessage" src=“a.html"></web-view>
Page({
  handleGetMessage: function(e) {
   console.log(e.target.data)
  }
})

tips: 如果网页发送了多次消息，在小程序接收的时候会把 data 合并,接受到的是一个数组

跳转链接的传参：

1
2
3
4
5
6
7
8
h5网页：
uni.navigateTo({
   url: '/pageThi/testDriver/testDriver?a=123',
})
小程序页面接受：
onLoad: function(options){
  console.log('3b3b3b', options)
},

结果：

解决 git pull/push 每次都要输入用户名密码的问题

如果我们git clone的下载代码的时候是连接的https://而不是git@git (ssh)的形式，当我们操作git pull/push到远程的时候，总是提示我们输入账号和密码才能操作成功，频繁的输入账号和密码会很麻烦。

1
2
git bash进入你的项目目录，输入：
git config --global credential.helper store

然后你会在你本地生成一个文本，上边记录你的账号和密码。当然这些你可以不用关心。
然后你使用上述的命令配置好之后，再操作一次git pull，然后它会提示你输入账号密码，这一次之后就不需要再次输入密码了。