小程序开发--学习笔记
Posted xing.org1^
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序开发--学习笔记相关的知识，希望对你有一定的参考价值。
一、小程序文档笔记
默认开发目录
开发目录解析
1. app.js、app.json、app.wxss 这三个文件必须有不能删掉。
一个小程序主体部分由这三个文件组成，而且必须放在项目的根目录
js后缀的是脚本文件，调用小程序框架提供的 API—— API 文档json后缀的文件是对整个小程序的全局配置文件——配置详解- 微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，用来激活。
例如，你没写他就会报这个错
app.json文件的pages属性的路径配置与tabBar内的list属性的路径配置必须一一对应，协调一致，不然调用了哪个页面，二者中有一个没配置都不起作用
另外，pages属性是要一定一定要在引用页面的时候配置好路径。
就像官方文档说的：
【注意】json文件不要加任何注释信息，任何json文件都是这样；
wxss后缀的是样式表文件。是整个小程序的公共样式表其他自定义文件夹下的页面中，wxml后缀的文件是页面结构文件。
2. pages文件夹下的index 页面和 logs 页面
pages 中的第一个页面是小程序的首页，一个小程序页面由四个文件组成。
index 页面——小程序的欢迎页
页面的样式表（.wxss文件)是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。
如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。【.json文件同理】
index.js、index.json、index.wxml、index.wxss——描述页面的这四个文件必须具有相同的路径与文件名
logs 页面——小程序启动日志的展示页
3. 框架
小程序的核心—响应的数据绑定系统
即：在逻辑层修改数据，视图层就会做相应的更新
视图层
视图层（View）描述语言：wxml，wxss
逻辑层（App Service）框架：基于javascript
//util文件夹下的util.js
1 function formatTime(date) {
2 var year = date.getFullYear()
3 var month = date.getMonth() + 1
4 var day = date.getDate()
5
6 var hour = date.getHours()
7 var minute = date.getMinutes()
8 var second = date.getSeconds()
9
10
11 return [year, month, day].map(formatNumber).join(\'/\') + \' \' + [hour, minute, second].map(formatNumber).join(\':\')
12 }
13
14 function formatNumber(n) {
15 n = n.toString()
16 return n[1] ? n : \'0\' + n
17 }
18
19 module.exports = {
20 formatTime: formatTime
21 }
判断时分秒是否大于10，不大于10，前边加一个0：
n[1] ? n : \'0\' + n
4. pages属性——一个数组
每一项都是字符串，写入路径信息，来指定小程序由哪些页面组成。字符串之间用逗号隔开。
每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。
小程序中新增/减少页面，都需要对 pages 数组进行修改。
5. page.json
相当于app.json下的window里的设置，只不过多了第七条:disableScroll
disableScroll：true,
这个情况，设置了也没用，页面超出后照样滚动，问题待解决。
6. page.js
page(data):
data 数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。
7. wxs
该有的在文档都有： https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxs/01wxs-module.html
以下是我实验的：
组件
——scroll-view
经验总结、实验代码如下
html
1 <view class="container">
2 <view class="dir-header">
3 scroll-view-y 垂直滚动练习
4 </view>
5 <scroll-view class="scroll-view" scroll-y enable-back-to-top bindscroll="scrollStart" bindscrolltoupper="scrollTop" bindscrolltolower="scrollBottom">
6 <!--
7 自由滚动 练习
8 bindscrolltoupper="upper"
9 bindscrolltolower="lower"
10 bindscroll="scroll"
11 -->
12 <view class="one">第一部分</view>
13 <view class="two">第二部分</view>
14 <view class="three">第三部分</view>
15 <view class="four">第四部分</view>
16 <view class="five">第五部分</view>
17 <view class="six">第六部分</view>
18 <view class="seven">第七部分</view>
19 </scroll-view>
20 <view class="btn-area">
21 <button class="btnScroll" size="mini">鼠标移上去+滚轮滑动查看</button>
22 </view>
23 <scroll-view class="scroll-view scroll-view1" scroll-y enable-back-to-top scroll-into-view="{{toView}}">
24 <!-- 配合按钮点击tap函数，制作点击 翻动 效果
25 scroll-into-view="{{toView}}"
26 -->
27 <view class="one" id="one">第一部分</view>
28 <view class="two" id="two">第二部分</view>
29 <view class="three" id="three">第三部分</view>
30 <view class="four" id="four">第四部分</view>
31 <view class="five" id="five">第五部分</view>
32 <view class="six" id="six">第六部分</view>
33 <view class="seven" id="seven">第七部分</view>
34 </scroll-view>
35 <view class="btn-area">
36 <button class="btnScroll" size="mini" bindtap="tap">点击我来切换内容哦</button>
37 </view>
38 <scroll-view class="scroll-view scroll-view2" scroll-y enable-back-to-top scroll-top="{{scrollTop}}">
39 <!-- 配合按钮点击tapMove函数，制作点击向上滚动指定距离效果
40 scroll-top="{{scrollTop}}" -->
41 <view class="one" id="ones">第一部分</view>
42 <view class="two" id="twos">第二部分</view>
43 <view class="three" id="threes">第三部分</view>
44 <view class="four" id="fours">第四部分</view>
45 <view class="five" id="fives">第五部分</view>
46 <view class="six" id="sixs">第六部分</view>
47 <view class="seven" id="sevens">第七部分</view>
48 </scroll-view>
49 <view class="btn-area">
50 <button size="mini" bindtap="tapMove">点击我来实现内容滚动哦</button>
51 </view>
52 </view>
css
1 .container{
2 padding:20rpx 0;
3 }
4 .dir-header{
5 font-size: 16px;
6 color: #aaa;
7 text-align: center;
8 font-weight: bold;
9 }
10 .scroll-view,.scroll-view2{
11 height: 120px;
12 margin-top: 10px;
13 }
14 .scroll-view1{
15 height: 100px;
16 }
17 .scroll-view view{
18 height: 100px;
19 line-height: 100px;
20 text-align: center;
21 /* border: 1px solid #188eee; */
22 }
23 .one{
24 background: #f7f7f7;
25 color: #aaa;
26 }
27 .two{
28 background: #f1f1f1;
29 color: #c7c7c7;
30 }
31 .three{
32 background: #e9e9e9;
33 color: #d2d2d2;
34 }
35 .four{
36 background: #e1e1e1;
37 color: #d8d8d8;
38 }
39 .five{
40 background: #d8d8d8;
41 color: #e1e1e1;
42 }
43 .six{
44 background: #d2d2d2;
45 color: #e9e9e9;
46 }
47 .seven{
48 background: #c7c7c7;
49 color: #f1f1f1;
50 }
51 /*btn-area */
52 .btn-area{
53 margin-top: 10px;
54 }
55 .btnScroll{margin-right: 5px;}
js
1 // 变量定义区域
2 var scrollorder = ["one", "two", "three", "four", "five", "six", "seven"];
3 var scrollorder_s = ["ones", "twos", "threes", "fours", "fives", "sixs", "sevens"];
4 // 调用page方法api
5 Page({
6 /**
7 * 页面的初始数据
8 */
9 data: {
10 toView: "one",
11 scrollTop: 100
12 },
13 /**
14 * 用户的自定义数据
15 */
16 // 3条不同效果滚动事件的触发反馈
17 scrollStart: function (event) {
18 console.log("scrolling。。。");
19 },
20 scrollTop:function(){
21 console.log("到顶了");
22 },
23 scrollBottom:function(){
24 console.log("到底了");
25 },
26 // 点击一次按钮，向上滚动完一个view内容
27 // 自己加了判断条件，如果翻页到最后一个，就让他返回到第一个
28 // 这个i换成--，就可以做成轮播图的左右切换效果了
29 // 另外如果可以设置滚动一次的距离，就可以做成触摸效果的左右切换banner图了。
30 tap:function(event){
31 for(var i = 0; i < scrollorder.length; ++i){
32 if(scrollorder[i] === this.data.toView){
33 // console.log(i);
34 if (i == scrollorder.length-1) {
35 this.setData({
36 toView: scrollorder[0]
37 })
38 }else{
39 this.setData({
40 toView: scrollorder[i + 1]
41 })
42 }
43 break;
44 }
45 }
46 },
47 // 点击按钮，向上滚动自定义距离的内容
48 tapMove:function(event){
49 console.log("点击了");
50 // 这个还得判断，如果滚到顶部了就让他变回来或者提示
51 // 另外，100 和 7 可以后期动态判断
52 if(this.data.scrollTop >= (100 * 7)){
53 console.log("您已经查看底部了哦")
54 }
55 this.setData({
56 // 这里，如果最后加100，并且总盒子scroll-view的高度也是100的话，可以模拟tapMove的效果，点击一下就是翻一页
57 // scrollTop: this.data.scrollTop + 100
58 scrollTop:this.data.scrollTop + 20
59 })
60 },
61 })
——block
<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性（想wx:if，wx:else，wx:for等）。
——template
模板定义：
template，双标签，且要给他起一个独一无二的name
<template name=“onlyName”>模板内容</template>
示例：
模板中也可以放变量，调用的时候再传入不同的数据。方便重复调用：
<template name=“onlyName”>
<view >{{text}}</view>
</template>
模板引用：
通过import引用、调用目标文件中<template>中定义的内容
调用某个wxml页面中定义好的模板部分，template处用is调用
1 <import src=“定义模板的页面路径”/>
2 <template is=“要引用的模板的name值”/>
示例：
技巧：
template的is中可以使用Mustache语法，里边放判断用的三元表达式，这样就可以动态性的根据需求渲染模板。
文档案例：
问题：
在模板页面设置的css样式，调用到另一个页面后，是不受管制的，所以可能需要复制一份css样式到调用的页面，或者把模板用到的css写到公用样式app.wxss中。
还有一种方法是调用wxss文件：@import方法：
@import "../about/about.wxss";
这个方法，可以把about.wxss里边的样式全部调到目标页面，但是还是建议公用的代码放到app.wxss中。
调用带数据的模板：
<template is="aboutTwo" data="{{msg:\'我是index.wxml里边传入的数据\'}}"/>
问题：
目前用这种，在template标签上放data属性来传入数据值得方法。但是如果数据多了咋办？那就要想怎么把数据放到js文件的data中，然后在template中调用。
小程序开发--学习笔记