小程序开发之旅(持续更新中..)
以下内容都是在0.11.112301版本中实践得出。现已更新至0.17.172600,如有版本调整,按实际情况而定,仅供出现类似情况时参考。
1. 快捷键
右键,选择格式化,格式化js、wxml、wxss等代码,也可以用Alt + SHIFT + F快捷键;
2. 知识点
小程序总会在读取Page下的data对象来做数据绑定,这个动作我们称之为A,而这个A动作的执行,是在onLoad函数之后执行的。但是在122100版本以后,this.data做数据绑定的方法已失效,并且也不建议直接通过this.data来修改数据值.
模板样式的引用。加入已存在a-template.wxml模板文件,同级目录下新建了a-template.wxss样式文件.在具体模块中需要引用模板时,则需要在具体引用模板的样式文件中,引入模板文件的样式
@import xxx/a-template.wxss
。这里的import路径也为相对路径。小程序目前只实现了模板化,即能到标签和样式的集合的复用,但这个集合对应的交互逻辑(即js部分)却不能像引用样式文件那样直接应用,从而达到模块化的目的。
布局问题
问题背景:在一个列表页,底部有一个创建按钮,如果列表数据不够多时,它位于视图底部,如果列表数据超过一屏,则跟随列表最后面,如下图的“我也创建一个官网”;
代码结构大概如下:// 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. 注意点
标签写法
<import src="xxx" />
注意闭合的/
<template is="xxx" data="{{xxx}}" />
注意闭合的/
,以及data
需要双花括号路径问题
var postData = require("../../xxx/xxx.js")
,require要求必须为相对路径。
<import src="xxx/xxx.wxml" />
,既可以相对路径,又可以绝对路径。自定义属性值名字和获取
通过data-item-name="{{obj.name}}"
在对应的标签上设置需要传递的属性值,然后在对应的事件中通过event.currentTarget.dataset.itemName来获取对应的name值,需要注意的是data-item-name自定义属性在获取时,data-会被忽略,并且后面的连字符-
会被转化为驼峰格式变量itemName
。如果连字符直接的某个字符串中有大写如data-postId
,最后会被转化为小写,要通过event.currentTarget.dataset.postid
来获取,这点需要注意。wx.showActionSheet()
方法中的success回调函数参数中,res.cancel
若用户没有点击取消则为undefined
并非false
,而当用户点击取消则为true
。模板中引用图片等外部资源路径
使用模板是为了复用,如果是项目根目录中有独立的模板文件夹,对应引用根目录下的类似static文件夹中的image等资源,路径是相当固定的,可以用相当路径。但如果是某个模块内部的模板,被复用时,可能会因为路径的原因,导致引用失败,这点是需要注意的,建议使用绝对路径。在
app.json
的pages
下新增一条不存在的文件路径,例如pages/test
这时候会pages目录下生成test.js
、test.json
、test.wxml
、test.wxss
四个文件,相当于快键新建,不过这种做法有点坑爹~~json文件配置backgroundColor
小程序文档里面关于backgroundColor
的描述是窗口的背景色,但是让人误解的是视口屏幕的背景色。实际效果如下:
若要设置当前窗口的背景色,可用如下方法设置:// index.wxsspage{height: 100vh;background-color: #3497db;}
4. 待讨论
长度单位
用px值:margin-top/margin--bottom,letter-spacing, border
小程序开发之旅(持续更新中..)相关推荐
- 微信小程序——小程序开发经验总结(持续更新)
微信小程序--开发经验总结(持续更新) 部署前端后,刷新页面没有更换效果 情境导入 vue项目打包生成了dist文件,然后进入了/www/server/nginx/html目录中,进行了文件更替 重启 ...
- 【第十三届蓝桥杯备战】C/C++解题时的一些个人小技巧和注意事项(持续更新中)
[第十三届蓝桥杯备战]C/C++解题时的一些个人小技巧和注意事项(持续更新中) 输入输出 数组 数据结构 1. 线段树 调试 References 先说一些废话:我最近觉得写算法题就像是打格斗游戏一样 ...
- VSTO开发入门教程[持续更新中......]
Paragraph 01 VSTO课程学习路线图[持续更新中......] 第一阶段:熟悉 visual studio 编程环境 1.1--理解 VSTO 的概念 1.2--安装 visual stu ...
- 微信小程序开源项目库汇总-持续更新
微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等 UI组件 weui-wxss ★852 - 同微信原生视觉体验一致 ...
- 微信小程序入门级教程(持续更新)
文章目录 微信的一些项目 从介绍开始入门 开发 1 起步 2 微信的一些项目 微信提供了很多功能及东西,我们这里主要学习下小程序开发(因为比较火,说不定学了一段时间后就不用了呢) 从介绍开始入门 学习 ...
- 淘宝小程序的坑(持续更新)
1. 淘宝小程序 ui 组件更新缓慢(基本不更新) form组件 onFormChange 当formItem field 没有值的时候 返回对应的name 为空 tab 返回的index 会加上 ...
- SpringCloud学习笔记,课程源自黑马程序员,笔记持续更新中...
@SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式: 学习内容 1.服务拆分-服务远程调用: 2.搭建eureka服务: 2.1.eureka服务注册-client 2 ...
- 张双老师PHP开发实例教程持续更新中
PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一种开源的通用计算机脚本语言,尤其适用于网络开发并可嵌入HTML中使用.PHP的 ...
- 微信小应用-小程序-demo-仿芒果TV (持续更新)
https://github.com/web-Marker/wechat-Development?hmsr=toutiao.io&utm_medium=toutiao.io&utm_s ...
最新文章
- 高糊视频秒变4K,速度比TecoGAN快了9倍!东南大学提出新的视频超分辨率系统
- Properties常用方法
- 推荐30个新鲜出炉的精美 jQuery 效果
- LeetCode-145:二叉树的后序遍历
- 60-008-020-使用-命令-flink命令
- 无数老板做企业还在卖产品赚差价
- mysql------事务
- 美图 android sdk,ADT中使用Android SDK Manager安装X86的System Image | 在路上
- 28. Avoid returning handles to object internals
- android mat教程,OpenCV for Android - Access elements of Mat
- 马斯克神经网络转换器_通过转换数据来减少人工神经网络的复杂性
- 认识移动基站通信设备
- freepiano 手残党也想弹钢琴(在电脑上弹奏电子钢琴自娱自乐,也许还是有点困难,不如试试freepiano+鼠标宏,这样用简谱就不怕残疾了)
- 在 Microsoft Windows Server 2008 R2 上安装 IE 11
- 黑金Xilinx FPGA学习笔记(一)verilogHDL扫盲文-(1)
- 无法识别服务器硬件信息,请教:无法获取服务器硬件信息
- 华为设备配置小型园区网
- WINRAR的破解方法
- BGP进阶:BGP 综合实验一
- 关于VMware Desktone中的Slony和数据库
热门文章
- fit函数 model_函数式 API
- 静态内部类实现单例_为什么用枚举类来实现单例模式越来越流行?
- Linux实现删除撤回的方法。
- 最新酷睿计算机配置,三款intel九代酷睿全系列组装电脑配置推荐 每一款CPU都支持超频...
- 计算机机房维护保养计划表,机房日常维护保养计划
- T计算机硬件系统是指,计算机硬件系统试题 有答案
- linux转发邮件,转发Linux服务器上的传入邮件?
- android自定义横向时间轴,Android自定义时间轴的实现过程
- java 登陆拦截_登录拦截 - java代码库 - 云代码
- linux启用dcb步骤,Linux DCB体系——简短概述