weixin_34071713

小程序 - 学习笔记

一、小程序文档笔记

默认开发目录

开发目录解析

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 }

View Code

判断时分秒是否大于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

以下是我实验的：

一个wxs还可以调用两个wxs甚至多个

多个页面可以嵌套调用，比如：b调a，c调b，那么在c里边也可以输出a里边的原始数据

文件a与其原始数据

文件b的调用

文件c的调用

注意，定义了变量还要输出变量：“exports”的拼写，另外对象里边的结构也总是写错，key：value，（键名、冒号、键值、逗号、最后一条没有逗号，更没有分号）

可以把js中的data的数据传入到wxs中，直接使用就好了。

【可以闭合标签引入wxs页面】

直接把test.js中的数据当做参数传到wxs的函数中，调用得到boo函数的结果。如：{{toolJs.boo(msg)}}

tool.wxs截图在上边(是文件a的截图)，text.js文件截图如下

组件

——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   
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   
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   
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>

wxml

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;}

wxss

 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

　　　　并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性（想wx:if，wx:else，wx:for等）。

——template

模板定义：

template，双标签，且要给他起一个独一无二的name

<template name=“onlyName”>模板内容template>

示例：

模板中也可以放变量，调用的时候再传入不同的数据。方便重复调用：

<template name=“onlyName”>

    <view >{{text}}view>

template>

模板引用：

通过import引用、调用目标文件中

小程序 - 学习笔记

一、小程序文档笔记

1. app.js、app.json、app.wxss 这三个文件必须有不能删掉。

2. pages文件夹下的index 页面和 logs 页面

3. 框架

小程序的核心—响应的数据绑定系统

即：在逻辑层修改数据，视图层就会做相应的更新

4. pages属性——一个数组

相当于app.json下的window里的设置，只不过多了第七条:disableScroll

6. page.js

组件

——scroll-view

——block

——template

——inport 作用域

——include 引用模板页面

二、小程序组件大纲——20170803版本

视图容器

基础内容

表单

导航

多媒体

地图

画布

开发数据

客服会话

三、小程序困惑：

四、小程序开发问题汇总

Padding的问题

字体大小、间距问题

模拟机可以css调用背景图但是真机不显示background-image

rpx和px的使用场景

溢出隐藏+小标点符号不能显示

小程序本页面内楼层跳转

如何让传入的json数据渲染到页面后，带组件的标签格式？或者正确区分并翻译我的组件代码和文本？

关于页面跳转

五、小程序技巧

页面加载后切换一次类名，实现初始页动画展示、初始页切换类名、配合一次性定时器切换类名

返回顶部 效果

css

动态的添加内容、渲染结构

Console.log(event)

关于rpx单位的用法：

巧用if判断和for循环搭建结构

如何实现“万能（不管内部文字极限）”垂直居中

终于研究出来怎么让Scroll-x实现横向滚动拉！！

六、小程序友情链接：

你可能感兴趣的:(json,php,javascript,ViewUI)

1.　 app.js、app.json、app.wxss 这三个文件必须有不能删掉。

2.　pages文件夹下的index 页面和 logs 页面

3.　　框架

　　相当于app.json下的window里的设置，只不过多了第七条:disableScroll

返回顶部效果