微信小程序大小问题整理

文件格式
视图层 [ .wxml ]、[ .wxss ]、[ .wxs ]、逻辑层[ .js ]、配置[ .json ]
  wxml类似一个嵌套组件,开头并没有声明之类的东西,直接上了功能类似于


  wxss目前没发现和css有太大区别的地方,可以用@import引入另外一个表(一般引公共表),也可以直接在wxml里写内联样式
  wxs是小程序的脚本语言,有自己语法,和js类似但并不一致,两者运行互不相关,也不能调用API,据官方说IOS下比js运行快2-20倍,通过内嵌或者建立 .wxs 文件。注意每个wxs都是单独模块,变量和函数私有,给外边就用module.exports。
  小程序的 js 里目前可知的是不能操作DOM的,但是同时也给定了一大批API,十分方便好用,js总是有很多好玩的,这里先贴一块文档介绍。

增加 App 和 Page 方法,进行程序和页面的注册。
增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
每个页面有独立的作用域,并提供模块化能力。文档入口

  json是一个定义配置的json数据文件,有全局配置app.json、工具配置project.config.json,还有单个子页面的配置page.json。小程序的json里配置项有现成名字,像全局的 pages、window、tabBar、networkTimeout、debug等;至于page.json即单个页面的配置,只有window配置项(即页面展示样式)的权限,所以不用写配置项名字,直接写内容。写完页面配置会覆盖掉全局配置的window属性。
/一个小程序的简单文件树模型/

├── app.js
├── app.json 
├── app.wxss
├── pages     /*页面文件包*/
│   │── index  /*每个文件夹一个页面*/
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json  /*page.json*/
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils
    └── utils.js /*封装的工具类js,utils里用 module.exports 输出,外部用require调用*/

文件的嵌套
  wxml中嵌套另外一个wxml
  wxss中的嵌套@import “../public/public.wxss”;
  js中的嵌套var utils = require(‘../../utils/util.js’)
需要配合在被引用js中使用module.exports = {sayHi:sayHi,task:task}
rpx/rem
  rpx、rem是自适应屏幕尺寸的单位。小程序的宽度是750rpx(20rem)。如果屏幕宽度是375px,使用rpx后, 1rpx = 0.5px;使用rem的话,1rem = 18.75 px。相比之下,rpx更适合精细定位。
花括号/大括号

//开发者工具中
if(true){
  this.setData({
    foo:'bar'
  })
}
//可省略为
if(true)
  this.setData({
    foo:'bar'
  })
//强迫症 短时间内不打算采用,还是老规矩写

双花/大括号
{{valueText}}和Vue(或者PHP,同样都是嵌套插入)里的用法比较像,wxml里插入,js里动态设定内容。双括号可以充当类名(class=”{{className}}”)、属性(src=”{{imageUrl}}”)。可以包裹三元表达式如class=”{{dataNum == 2?’newClass’:”}}”根据外在条件做判断,可以达到动态改变元素样式的目的。
小程序组件
swiper
  滑块视图容器,就是焦点图,不用再写一大堆js,定义一下属性就可以实现不错的效果。

<swiper style="height:300rpx;width:100%" autoplay="true" 
indicator-dots="true" indicator-color="#fff" 
indicator-active-color="#00c0ff" 
bindchange="swiperChange" bindanimationfinish="swiperFinish">
  <swiper-item >
    <image mode="widthFix" src="demo.jpg"></image>
  </swiper-item>
</swiper>

  swiper 和 swiper-item需要组合使用,上面这个定义了宽高、自动、小圆点指示器。还有interval、duration、circular、vertical这些属性等等。可以绑定 change 和 finish 事件。
view
  view也是视图容器,还有scroll-view、movable-view、cover-view,就是字面意思,可滚动的,可移动的,覆盖的。给个入口
textarea原生组件
  textarea适合在输入多行文本时候使用,不过需要注意这是个原生组件,层级是最高的,非原生组件是盖不到它上面的。scroll-view、swiper、picker-view、movable-view这几个里面不能使用,没C3动画,也不能fixed。
  为了在原生组件上添加内容,小程序定义了两个特殊的原生组件,cover-view 与cover-image,这两个可以覆盖在部分原生组件之上。可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher。很遗憾这个部分并不包括textarea,需要覆盖的情况可以考虑隐藏textarea的样式,附加的内容在带有样式的view里上下排列。
  另外,在textarea输入区域内也不建议有其它元素的事件,因为开发者工具中事件是可以绑定和测试成功的,但是真机上有问题。比如之前的项目里有需要通过定位把一个按钮布局进textarea区域内,bindtap=”copy”(copy是自定义的名字)开发者工具里点击按钮一次,实现了复制;预览进入真机之后,点击会弹出键盘,私以为这是原生组件的最高层级问题,但是在疯狂点击之后,有那么一两次会触发成功,而且在特意放大按钮之后,触发几率会变大。最后是以text替换textarea解决,暂时没有详细测试根本原因。Mark

小程序Flex布局
  Flex布局的常用属性总结一下

.container{//容器
    display:flex;
    height:100%;
    width:100%;
    flex-direction:row; //默认是 row 按行排,column 是按列排
    flex-wrap:nowrap; //挤不下的时候缩窄,选用wrap 的话是换行
    flex-flow:nowrap row; //上边两个的复合写法
    justify-content:center; //水平居中
    //flex-start | flex-end | space-between | space-around
    align-items:center; //垂直居中,针对一行
    //flex-start | flex-end | baseline | stretch;
    align-content:center; // 垂直居中,针对wrap的多行
}
.content{//内容
    flex-grow:2; //地方足够大时,规定这个元素放大的比例
    flex-shrink:1; //不够大时,规定这个元素缩小的比例
    flex-basis:100rpx; //水平方向占多大空间
    flex:2 1 100rpx; //grow,shrink,basis复合写法
    order:3; //从左到右显示的顺序
    align-self:; //每个元素自己的对齐方式
}

做一个简单的复制、清空按钮

<view>
    <text>{{results}}</text>
    <button size='mini' bindtap='clear'>清空<button/>
    <button size='mini' bindtap='copy'>复制<button/>
</view>

//js文件

page({
    data:{
        results:'测试文本',
    }
    //判断是否有内容,没有就提示,有就清空
    clear: function (e) {
    var that = this;
    if (that.data.results == '') {
      wx.showToast({
        title: '无内容',
        icon: 'none'
      });
    } else {
      that.setData({
        results: ''
      })
      wx.showToast({
        title: '清除成功',
        icon: 'none'
      });
    }
  },
  //判断是否有内容,没有就提示,有就放进剪切板
  copy: function (e) {
    var that = this;
    if (that.data.results == '') {
      wx.showToast({
        title: '无内容',
        icon: 'none'
      });
    } else {
      wx.setClipboardData({
        data: that.data.results,
        success: function (res) {
          wx.showToast({
            title: '复制成功',
            icon: 'none'
          });
        }
      });
    }
  },

做一个有字数提示的输入框
使用的组件是textarea,想添加一个限定字数的提示。

<view>
    <textarea bindinput='inputs' value='{{majorValue}}'></textarea>
    <text class='textTip'>你还可以输入{{currentLeft}}字</text>
</view>

//js文件 字数检测

page({
    data:{
        majorValue:"",
        currentLeft:140,
    }
    inputs: function (e) {    
    var value = e.detail.value;     //找到当前框内的值
    var len = parseInt(value.length);   //算出长度          
    this.setData({
      currentLeft: 140-len  //总长度减去目前长度
    });  
  },
})

生命周期函数

onLoad: function ()  //监听页面加载
onShow: function ()  //页面显示/切入前台时触发。
onReady: function ()  //页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
/*对界面内容进行设置的 API 如wx.setNavigationBarTitle,需在onReady之后进行。*/
onHide: function ()  //页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等。
onUnload: function ()  //页面卸载时触发。如redirectTo或navigateBack到其他页面时。
0
如无特殊说明,文章均为本站原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到