以下内容都是在0.11.112301版本中实践得出。现已更新至0.17.172600,如有版本调整,按实际情况而定,仅供出现类似情况时参考。

1. 快捷键

  1. 右键,选择格式化,格式化js、wxml、wxss等代码,也可以用Alt + SHIFT + F快捷键;

2. 知识点

  1. 小程序总会在读取Page下的data对象来做数据绑定,这个动作我们称之为A,而这个A动作的执行,是在onLoad函数之后执行的。但是在122100版本以后,this.data做数据绑定的方法已失效,并且也不建议直接通过this.data来修改数据值.

  2. 模板样式的引用。加入已存在a-template.wxml模板文件,同级目录下新建了a-template.wxss样式文件.在具体模块中需要引用模板时,则需要在具体引用模板的样式文件中,引入模板文件的样式@import xxx/a-template.wxss这里的import路径也为相对路径

  3. 小程序目前只实现了模板化,即能到标签和样式的集合的复用,但这个集合对应的交互逻辑(即js部分)却不能像引用样式文件那样直接应用,从而达到模块化的目的。

  4. 布局问题
    问题背景:在一个列表页,底部有一个创建按钮,如果列表数据不够多时,它位于视图底部,如果列表数据超过一屏,则跟随列表最后面,如下图的“我也创建一个官网”;

    代码结构大概如下:

        // index.wxml<view class="main-container"><view class="list-container"></view><view class="btn"></view></view>
        // index.wxss.main-container{display: flex;flex-direction: column;min-height: 100vh;}.list-container{flex: 1;}.btn{...}

    重点在min-height: 100vh,这个知识点,一开始我在看阮一峰老师关于Flex 布局教程:实例篇的时候有看见,但当时没有忽略了min-height: 100vh,而是直接用position: fixed去实现的,但效果当然跟目的不一致了。关于vh,vm可以看下这篇文章视区相关单位vw, vh..简介以及可实际应用场景

3. 注意点

  1. 标签写法
    <import src="xxx" /> 注意闭合的 /
    <template is="xxx" data="{{xxx}}" /> 注意闭合的/,以及data需要双花括号

  2. 路径问题
    var postData = require("../../xxx/xxx.js") ,require要求必须为相对路径
    <import src="xxx/xxx.wxml" />,既可以相对路径,又可以绝对路径。

  3. 自定义属性值名字和获取
    通过data-item-name="{{obj.name}}"在对应的标签上设置需要传递的属性值,然后在对应的事件中通过event.currentTarget.dataset.itemName来获取对应的name值,需要注意的是data-item-name自定义属性在获取时,data-会被忽略,并且后面的连字符-会被转化为驼峰格式变量itemName。如果连字符直接的某个字符串中有大写如data-postId,最后会被转化为小写,要通过event.currentTarget.dataset.postid来获取,这点需要注意。

  4. wx.showActionSheet()方法中的success回调函数参数中,res.cancel若用户没有点击取消则为undefined并非false,而当用户点击取消则为true

  5. 模板中引用图片等外部资源路径
    使用模板是为了复用,如果是项目根目录中有独立的模板文件夹,对应引用根目录下的类似static文件夹中的image等资源,路径是相当固定的,可以用相当路径。但如果是某个模块内部的模板,被复用时,可能会因为路径的原因,导致引用失败,这点是需要注意的,建议使用绝对路径

  6. app.jsonpages新增一条不存在的文件路径,例如pages/test这时候会pages目录下生成test.jstest.jsontest.wxmltest.wxss四个文件,相当于快键新建,不过这种做法有点坑爹~~

  7. json文件配置backgroundColor
    小程序文档里面关于backgroundColor描述是窗口的背景色,但是让人误解的是视口屏幕的背景色。实际效果如下:

    若要设置当前窗口的背景色,可用如下方法设置:

        // index.wxsspage{height: 100vh;background-color: #3497db;}

4. 待讨论

  1. 长度单位
    用px值:margin-top/margin--bottom,letter-spacing, border

小程序开发之旅(持续更新中..)相关推荐

  1. 微信小程序——小程序开发经验总结(持续更新)

    微信小程序--开发经验总结(持续更新) 部署前端后,刷新页面没有更换效果 情境导入 vue项目打包生成了dist文件,然后进入了/www/server/nginx/html目录中,进行了文件更替 重启 ...

  2. 【第十三届蓝桥杯备战】C/C++解题时的一些个人小技巧和注意事项(持续更新中)

    [第十三届蓝桥杯备战]C/C++解题时的一些个人小技巧和注意事项(持续更新中) 输入输出 数组 数据结构 1. 线段树 调试 References 先说一些废话:我最近觉得写算法题就像是打格斗游戏一样 ...

  3. VSTO开发入门教程[持续更新中......]

    Paragraph 01 VSTO课程学习路线图[持续更新中......] 第一阶段:熟悉 visual studio 编程环境 1.1--理解 VSTO 的概念 1.2--安装 visual stu ...

  4. 微信小程序开源项目库汇总-持续更新

    微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等 UI组件 weui-wxss ★852 - 同微信原生视觉体验一致 ...

  5. 微信小程序入门级教程(持续更新)

    文章目录 微信的一些项目 从介绍开始入门 开发 1 起步 2 微信的一些项目 微信提供了很多功能及东西,我们这里主要学习下小程序开发(因为比较火,说不定学了一段时间后就不用了呢) 从介绍开始入门 学习 ...

  6. 淘宝小程序的坑(持续更新)

    1. 淘宝小程序 ui 组件更新缓慢(基本不更新) form组件  onFormChange 当formItem field 没有值的时候  返回对应的name 为空 tab 返回的index 会加上 ...

  7. SpringCloud学习笔记,课程源自黑马程序员,笔记持续更新中...

    @SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式: 学习内容 1.服务拆分-服务远程调用: 2.搭建eureka服务: 2.1.eureka服务注册-client 2 ...

  8. 张双老师PHP开发实例教程持续更新中

    PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一种开源的通用计算机脚本语言,尤其适用于网络开发并可嵌入HTML中使用.PHP的 ...

  9. 微信小应用-小程序-demo-仿芒果TV (持续更新)

    https://github.com/web-Marker/wechat-Development?hmsr=toutiao.io&utm_medium=toutiao.io&utm_s ...

最新文章

  1. 高糊视频秒变4K,速度比TecoGAN快了9倍!东南大学提出新的视频超分辨率系统
  2. Properties常用方法
  3. 推荐30个新鲜出炉的精美 jQuery 效果
  4. LeetCode-145:二叉树的后序遍历
  5. 60-008-020-使用-命令-flink命令
  6. 无数老板做企业还在卖产品赚差价
  7. mysql------事务
  8. 美图 android sdk,ADT中使用Android SDK Manager安装X86的System Image | 在路上
  9. 28. Avoid returning handles to object internals
  10. android mat教程,OpenCV for Android - Access elements of Mat
  11. 马斯克神经网络转换器_通过转换数据来减少人工神经网络的复杂性
  12. 认识移动基站通信设备
  13. freepiano 手残党也想弹钢琴(在电脑上弹奏电子钢琴自娱自乐,也许还是有点困难,不如试试freepiano+鼠标宏,这样用简谱就不怕残疾了)
  14. 在 Microsoft Windows Server 2008 R2 上安装 IE 11
  15. 黑金Xilinx FPGA学习笔记(一)verilogHDL扫盲文-(1)
  16. 无法识别服务器硬件信息,请教:无法获取服务器硬件信息
  17. 华为设备配置小型园区网
  18. WINRAR的破解方法
  19. BGP进阶:BGP 综合实验一
  20. 关于VMware Desktone中的Slony和数据库

热门文章

  1. fit函数 model_函数式 API
  2. 静态内部类实现单例_为什么用枚举类来实现单例模式越来越流行?
  3. Linux实现删除撤回的方法。
  4. 最新酷睿计算机配置,三款intel九代酷睿全系列组装电脑配置推荐 每一款CPU都支持超频...
  5. 计算机机房维护保养计划表,机房日常维护保养计划
  6. T计算机硬件系统是指,计算机硬件系统试题 有答案
  7. linux转发邮件,转发Linux服务器上的传入邮件?
  8. android自定义横向时间轴,Android自定义时间轴的实现过程
  9. java 登陆拦截_登录拦截 - java代码库 - 云代码
  10. linux启用dcb步骤,Linux DCB体系——简短概述