初学《微信小程序开发入门与实践》学习过程中的“坑”与收获

 

一  坑（自己的坑，读者不一定上当）：

第一天：使用<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  效果图）：

 

时间有限，未完代续。。。