第一次小程序经验分享

  • • 发表于 3个月前
  • • 作者 小怂
  • • 1890 次浏览
  • • 0 条评论
  • • 最后编辑时间 3个月前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

    首先小程序主要由WXML,WXSS,JS三部分组成,而WXML与WXSS脱胎于xml与css,有一定的区别,具体见http://www.wxappclub.com/topic/497 (刘冰华) 以及http://www.wxappclub.com/topic/694 (茂茂大妖怪)
    凡程序应用,皆为页面与功能。WXML与WXSS负责页面,JS负责功能。WXML告诉机器这个页面有什么内容,而WXSS告诉机器这些内容是怎么布局的。WXML与WXSS的具体用法小子就不一一赘述了,在此我就这次经历分享一下心得吧。
    页面(WXML):
            推荐每一个<>都赋予class属性,对于button text icon image 等有点击触发功能的组件都添加bindtap的属性(即使可能有的根本上就用不到)
            对于input或需要文本输入的组件,可以用emsp,enspm,nbsp实现空格,对于密码,则是添加password属性,为false时密码不可见,为true时密码可见
            对于页面跳转,则是添加navigator属性,并写明URL。不过我认为页面跳转最好还是放在JS里写比较好。
            对于swiper滑块视图容器,官方给出的代码我认为不是很好,因为在修改每个swiper-item时不时很方便。相反,这时可以把swiper-item单独拿出来分开写
            对于scroll-view可滚动视图容器,一定要注明是x轴还是y轴滚动!,并且必须规定整个容器的高度或者宽度。如果出现scroll-view-item的小容器不能铺满,可以在整个scroll-view外加上一层<view class='a-scroll'>
            搜索框的模式有两种,我常用的是<icon class="searchcion" size='20' type='search'></icon>
            <cover-***></cover-***>中间不能再加其他东西
    页面(WXSS):
            第一个通常是整个页面的布局,可用 .page{},也可以用自己在WXML命名的class
            页面布局的首要是确定布局方向,具体可以参考http://www.runoob.com/w3cnote/flex-grammar.html 
            其次是整个页面或者整个容器的长宽高颜色等属性。由width、height、color
            margin属性只写一个时是包含了top、right、bottom、left四个方向的。建议用时不要嫌麻烦,四个属性该怎么写就怎么写,不要只用一个margin
            字体的话,则是用font。有font-size、font-style、font-variant、font-weight、font-family
            边框的话,则是用border。有border-width、border-style、border-color  注意:border-width与border-color用法同margin
            背景的话,则是用background,有background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image
            position属性规定元素的定位类型。值有absolute、fixed、relative、static(默认值)、inherit
            注意:能用百分比时请用百分比,不推荐全部用px、rpx定长
    功能(JS):
            申明全局变量请在Page{}外申明
            page里的data常用来放我们会用到的数组以及一些变量
            onload方法是指加载 当前文件(页面)时会用到的方法。我们可以在这里读取我们之前存在本地的数据或者使用wx.getSystemInfo来获取一些需要在当前用到的数据信息;反之在onclose那里我们可以存放一些我们需要存放的数据。API中存储数据到本地用wx.setStorage(Sync)(不加Sync的是异步存储,加Sync是同步存储),获取本地存储的数据用wx.getStorage(Sync)(不加Sync的是异步存储,加Sync是同步存储)
            对于需要改变属性值的方法,一定要记得加e!!如: ***:function(e){}
            对于需要根据用户的输入来进行提示时,用wx.showToast。建议icon为none
            对于请求后台则是wx.request({}) 注意:微信小程序wx.request发起的请求必须是HTTPS
            页面跳转的API有wx.navigateTo,wx.redirectTo,wx.switchTab,wx.navigateBack,wx.reLaunch
            wx.chooseImage是用来选择本地图片的
    添:所有的页面都应该在app.json里注明
        在app.js里的app{}里申明globaldata变量,可以在其它*.js里通过app.globaldata引用这个变量

先写成这样吧,都把自己写晕的(◎﹏◎)。乱七八糟的
分享到:
评论区(共0条评论)
0条评论
Ctrl+Enter
作者

小怂

小怂

APP:0 帖子:2 回复:11 积分:378

已加入社区[104]天

主人太懒,签名没设置!

作者详情》
Top