小程序学习笔记

自学完小程序已经有一段时间了，现将之前的笔记分享与此。

注意：微信小程序不要创建太多的本地文件也不要导入太多的本地图片，因为小程序超过1M微信方会拒绝上架哦。

0:关于-打开文档

1:前端的object即字典;2:图片只能在工程中的文件夹里复制粘贴，不能在工程中拖拽进去,且图片不能大于40k

2.弹性盒子：display:flex 弹性盒子 默认是横向的，

                  display：flex ；

                  direction：column 弹性盒子，纵向的

3.主轴

  交叉轴：与主轴垂直

app.js 脚本文件：声明周期，声明全局变量，调用api

app.json 全局配置文件 哪些页面组成；配置页面样式，导航栏样式等,里边不能写注释，报错

app.wxss 公共样式表

app.js:逻辑

app.json：配置文件  不能写注释，写注释会报错

       1》pages：array   必填  中存放页面，pages中第一个元素是应用的初始页   设置页面路径

       2》window： object(字典)窗口；非必须  设置默认页面窗口表现

             window中以下三个属性只是在下拉刷新时使用

               1 ”backgroundColor": "#0000FF",

               2 ”backgroundTextStyle":"light",

               3 ”enablePullDownRefresh": true       

       3》tabbar:  object(字典)； 非必须；底部tab表现

       4》networkTimeout: object(字典) ；非必须 ；网络超时时间

       5》debug: Boolean ；非必须；是否开启debug模式

  

app.wxss:样式

xml：结构文件

内部.json: 作用：单独调试本页面的样式，即只能调试其自己的window，没有pages等其它四项,且内部.json的设置会覆盖app.json的相同项

逻辑层(App Service)

在js基础上添加了以下修改：

• 增加 App 和 Page 方法，进行程序和页面的注册。
• 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
• 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
• 每个页面有独立的作用域，并提供模块化能力。
• 由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。
• 开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。

{{ message }}报文中叫做message的字段取值

app的启动函数：App()

某页面的启动函数：Page()

UI层

 class = "container-horizontal bc_red"  两个样式

day-03

坑：首个页面的json文件啥也没写，控制台只显示到页面的注册，不能加载

button：bindtap

scrollview控件：

    scrollview

    scroll-into-view 不能写数字 哪怕写成“3”也不行

swiper控件：一个升级版的scrollview，有小圆点属性等

checkbox控件：多项选择器

label控件：

    目前可以绑定的控件有：, , , 。

radio控件：竟然叫做单选框，单项选择器

input控件：获取焦点；失去焦点；键盘输入时事件

textarea控件: 多行文本

navigator控件：相当于cell  有跳转链接 跳转并传参

form控件： 

          (button的属性formType 绑定form控件)；form内的控件都需要起个名字(name属性)，才能在submit时，找到各个控件提交到内容  bindsubmit提交 bindreset重置表单，即将表单内所有数据置空

audio控件：音频控件

      controls:此属性需要赋值，默认的却不显示控件了，必须设置

网络：

1,下拉刷新：

 enablePullDownRefresh ：true 允许下拉刷新

onPullDownRefresh  下拉刷新的监听事件

2，发请求：

wx.request(OBJECT)  最多能同时发5个请求

3，注意：有appID的小程序项目必须在公众账号上设置合法URL,否则请求发不出去的

4,报错：

res: Object {errMsg: "request:ok", data: Array[27], statusCode: 200}

WAService.js:1 TypeError: this.setData is not a function

    at Object.success (http://2134654846.appservice.open.weixin.qq.com/pages/index/index.js:19:14)

    at Object.function.t.(anonymous function).i.(anonymous function) [as success] (http://2134654846.appservice.open.weixin.qq.com/WAService.js:1:26406)

    at http://2134654846.appservice.open.weixin.qq.com/WAService.js:1:26849

    at XMLHttpRequest.f.onreadystatechange (http://2134654846.appservice.open.weixin.qq.com/asdebug.js:1:15813)function.t.(anonymous function).i.(anonymous function) @ WAService.js:1(anonymous function) @ WAService.js:1f.onreadystatechange @ asdebug.js:1

index.js [sm]:27 请求完成了

注意：回调方法用this时要注意了,解决方法：在回调方法即（wx.request方法外）声明that变量来代替this，如果直接调用this则this指的不是当前页面，而是当前方法

5,停止下拉刷新状态 wx.stopPullDownRefresh()

../form/form?name=Lily&wife=Lucy&like=miracle

http://www.douyutv.com/api/v1/live/1?offset=0&limit=20

http://www.douyutv.com/api/v1/live/cate_id?offset=当前数量&limit=20

http://box.dwstatic.com/apiNewsList.php?action=l&newsTag=headlineNews&p=l

http://box.dwstatic.com/1612/345710754771&aid=45010&uniqid=fcea156f37b166922ff782ea0e5aad10&gochannel=lol

通过网页图片的盒子模型获取图片大小，宽度是750rpx，根据图片真实大小计算应设置的高度