微信小程序js的全局调用，图片宽高自适应

一：js的全局调用

1.要注意的是必须要用module.exports导出要调用属性或方法；
2.使用的时候用var api = require('../../utils/api.js'); 加载代码，然后使用api.SYNC_TABLE_URL 直接调用
3.调用方法也差不多。

二：图片宽高自适应

1. <image src="url" class="imgClass" model="aspectFit" bindload="imageLoad" />

复制代码

1.以前将小程序图片宽度设置为屏幕宽度：

1. imageLoad: function () {
   
2.      this.setData({
   
3.          imageWidth: wx.getSystemInfoSync().windowWidth
   
4.      })
   
5. }

复制代码

2.现在：

1. .imgClass{
   
2.   width: 100vw;
   
3. }

复制代码

解析：
CSS3引入的”vw”和”vh”基于宽度/高度相对于窗口大小
”vw”=”view width”“vh”=”view height”
以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。
参照demo案例对照下面四个容器的css样式:

1. .demo {
   
2.    width: 100vw;
   
3.    font-size: 10vw; /* 宽度为窗口100%， 字体大小为窗口的10% */
   
4. }
   
5. .demo1 {
   
6.    width: 80vw;
   
7.    font-size: 8vw; /* 宽度为窗口80%， 字体大小为窗口的8% */
   
8. }
   
9. .demo2 {
   
10.    width: 50vw;
    
11.    font-size: 5vw; /* 宽度为窗口50%， 字体大小为窗口的5% */
    
12. }
    
13. .demo3 {
    
14.    width: 10vw;
    
15.    height: 50vh; /* 宽度为窗口10%， 容器高度为窗口的50% */
    
16. }

复制代码