微信小程序入门

微信小程序入门

1.首先在微信公众平台创建一个APPID。

2.在设置->开发设置->找到APPID，并且记住它，以后用得到。

3.下载微信开发工具，输入小程序APPID，不勾选下方的选择。

4.创建如下格式的目录：

5.配置app.json中about中用户可能出现的所有可能页面路径等，以及about页面的json和wxml。

个人笔记

小程序每个页面放在每个目录中，又放在一个总的副目录集中管理

app.json放小程序可能出现的所有路径

顶部导航栏设置：在about.json中设置背景颜色，导航栏标题等

但是有时候需要从服务器抓取标题信息，此时这样操作就不可以了

如果我们需要图片，可以创建一个image文件夹，里面放置所需要的文件

rpx相对长度  iphine 6 px：rpx=1:2

navigator标签的作用是用户点击时可以跳转到某个页面的部分操作

open-type属性初始化是navigate，可以跳转回原来的页面，假如设置为 redirect就是不可返回

通过tabar设置下方的导航栏，使用list，例如：

"list" : [{

"pagePath" : "pages/weekly/weekly" ,

"text" : "每周推荐" ,

"iconPath" : "image/icons/weekly.png" ,

"selectedIconPath" : "image/icons/weekly-select.png"

}

pagepath设置点击后跳转的路径，text设置下方的按键上的文字提示，iconpath设置未被选中时下方的按键图片，selectediconpath设置选中时的按键图片。

数据绑定，把js文件中渲染出来，在html文件中用双大括号显示，在data下的例如：

Page({

data:{

thisweekmovie:{

name: "教父" ,

comment: "最精彩的剧本，最真实的黑帮电影" ,

imagePath: "/image/2.jpg"

}

}

})

在html文件中，我们我可以用双大括号加thisweekmovie.name等代替原本的txet中的教父

小程序的运行环境与基本架构：分为视图层和逻辑层，基于数据绑定和事件机制通讯

条件渲染：只有条件成立时才会进行渲染

使用wx:if=""只有if条件成立时，text元素的渲染条件才成立，当为false时，此时元素是不生成的。当时用hidden属性时，不管什么条件都会被渲染生成，只是被隐藏了。所以可见性需要频繁切换的时候，不建议使用条件渲染。开销比较大。

列表渲染：重复对页面进行渲染。

在js文件中定义一个list，在html中使用wx:for=“”{{list}}“”循环遍历一个数组，通过item.各个元素代替原来的元素。其中index的值是循环数组的下标。在 css文件中配置渲染样式，flex-direction:column是设置所有元素垂直。

swiper:可以实现左右滑动的幻灯片样式，swiper-item元素是单个的滑动页面，indicator-dots设置为true时设置滑动幻灯片下方有导航,previous-margin next-margin，设置后面的幻灯片内容出现多少像素在上一个幻灯片窗口和后方，再通过 设置view元素的样式设置外边距就可以出现如图样式

页面的周期函数：

swiper里的current元素初始化h值为0，就是当我们点击进每日推荐时出现的是list中的下标为0，也就是第一个元素。当我们想要跳转回本周推荐页，也就是current初始化的页面时，设置一个 返回本周的按钮，binndtap设置事件机制。因为current和list在一个data中，不能使用list的长度减1这种方法获得初始化的页面，此时我们可以使用onload函数，实现current的初始化，通过this.setDate函数可以访问current，并且用.this.data.list.length-1可以获得初始化的页面。

更新数据：

使用this.setData更新数据，我们也可以在js定义一个时间处理函数例如：

也可以对局部的变量进行更新；

冒泡事件和非冒泡事件：

bindtap触发的事件冒泡向上传递给上一个元素

catchtap触发的事件不会向上冒泡