一 坑(自己的坑,读者不一定上当):
第一天:使用<image>引入图片失败
正确的<image>引入代码:‘
错误示例:<image class='post-image' src="../images/post/post-4.jpg"></image>
一开始查了各种资料 试了双引号 试了正反斜杠 最后跳过 看了会书 发现了是路径问题(页面的根元素page 千万注意路径问题 菜鸟小问题大麻烦)
二 注意(个人笔记,自己觉得有必要记一下的):
letter-spacing 字母间距;
swiper组件-----滑动视图容器;
效果图:
代码示例:
<swiper indicator-dots="true" autoplay="true" interval="5000">
<swiper-item >
<image src="../post/images/post/post-1@text.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../post/images/post/post-2@text.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../post/images/post/post-3@text.jpg"></image>
</swiper-item>
</swiper>
属性解释:
//indicator-dots :
Boolean类型。用来指示是否显示面板指示点(如效果图 上面切换图片的三个小圆点就是面板指示点----用来提提示当前图片 默认为false)
//autoplay:
Boolean类型。用来决定是否自动播放,默认false
//interval:
Number类型 / 用来设置swiper-item切换时间间隔,默认为5000毫秒
Boolean陷阱:
swiper组件有一个属性没有用到:vertical--指示点的排布方向是水平还是垂直 ,问题:将"vertical="ture" 或者"vertical="false" 都显示为垂直排布
解决方法:如果想让面板指示点水平排列,有以下方式:
不加入vertical属性
vertical=”“
vertical=”{{false}}“---数据绑定
以上小程序都认为你设置为 false 。所有组件的Boolean类型属性都有这样的Boolean陷阱,比如,indicator-dots ,,autoplay
display:flex----弹性布局;
flex-dierction:row ; column ; row-reverse ; column-reverse 四种view内元素排列方向;
image组件的4缩放种模式与9种裁剪模式(百度可见)
<image mode="scale ToFill"/>默认
4种缩放模式
scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素
aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来
aspectFill 保持纵横比缩放图片,只保证图片的的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取
widthFix 宽度不变,高度自动变化,保持原图宽高比不变
9种裁剪模式
top 不缩放图片,只显示图片的顶部区域
bottom 不缩放图片,只显示图片的底部区域
center 不缩放图片,只显示图片的中间区域
left 不缩放图片,只显示图片的左边区域
right 不缩放图片,只显示图片的右边区域
top left 不缩放图片,只显示图片的左上边区域
top right 不缩放图片,只显示图片的右上边区域
bottom left 不缩放图片,只显示图片的左下边区域
bottom right 不缩放图片,只显示图片的右下边区域
---------------------
作者:思婉梦秋
来源:CSDN
原文:https://blog.csdn.net/pw12345q/article/details/86703857
列表渲染 wx:for
小程序页面跳转:
(部分代码示例)在index.js中:
wx.redirectTo({
url: '../post/post',
success: function () {
console.log("jump success")
},
fail: function () {
console.log("jump failed")
},
complete: function () {
console.log("jump complete")
}
});
wx.redirectTo 跳转后直接调用Unload
wx.navigateTo(小程序最多只能跳“5-1”层页面) 跳转后可返回
三 收获(日志):
问题一:(“疑似” 软件不会用 )
隔三天我再打以后b开小程序开发工具 预览界面没有了 提示报错:Cannot read property '0' of undefined
解决方法:
小程序开发工具右上角 详情---自动运行体验评分
本人初学 ,在解决办法过程中 一般通过网上冲浪的方法寻找答案 , 或者自己尝试改动寻找错误方向 。
但解决了问题也不一定就明白原理 望大佬在看到某处问题,能解释原理或有不同方法的 ,提示修正, 万分感谢。
问题二:(字母粗心错误)
将文章数据从业务中分离(在实现小程序的模块化中):
var dateObj = require("../data/data.js");//1)不能使用绝对路径 报错 2)文件得加扩展名js,不然找不到报错
报错:
dataObj is not defined;at "pages/post/post" page lifeCycleMethod onLoad function
ReferenceError: dataObj is not defined
仔细检查了路径问题 各种试 脑子不转弯 然后顺着思路重新捋一遍 在post.js文件中找到问题 “ var dateObj”
正确应该是“var dataObj”
总结思想:(觉得有用的一些思想,不一定完全正确)
编程世界里遇到·的绝大多数问题都可以用封装的思想来解决。(小程序中的封装--模板)
四 主要代码示例(and 效果图):
时间有限,未完代续。。。