小程序学习笔记

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

注意:微信小程序不要创建太多的本地文件也不要导入太多的本地图片,因为小程序超过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 中一些能力都无法使用,如 documentwindow 等。
  • 开发者写的所有代码最终将会打包成一份 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控件:

    目前可以绑定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>

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,根据图片真实大小计算应设置的高度 


猜你喜欢

转载自blog.csdn.net/denggun12345/article/details/79246207
今日推荐