微信小程序

Posted on 2018-03-16 17:33  我编程我快乐  阅读(173)  评论(0编辑  收藏  举报

1.框架分析

  APP总体组成

  

  三个文件必须放在项目目录:

  app.js:javascript文件,处理全局逻辑(必须的)

  app.json:全局的配置文件,公共配置(必须的)

  app.wxss:全局的样式文件

  

  page页面(4个文件必须同名):

  page1.wxml:页面视图(类似于html)(必须的)

  page1.js:写程序的地方,写javascript(数据的model也放在这里),页面逻辑(必须的)

  page1.wxss:定义page1.wxml样式的文件(类似css)

  page1.json:私有的配置文件,会继承app.json文件。

  

  page中3个文件之间的交互:

  

  (index.js无法直接操作wxml文件中的DOM元素)

  

  index.wxml文件和index.js之间的交互

  

2.App.js

  一个微信小程序,必须实例化一个App对象:

  var data = {};

  App(data)

3.App.json

  这个文件不能写任何注释

  

  

       

  具体配置参考链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

4.index.js

  

 

 5.View组件和Flexbox弹性盒布局

flex-direction:分为row和column

justify-content:布局情况有如下几种

 

align-items在伸缩容器中的布局情况:

 

6.事件交互

 参考:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

通过bindtap绑定函数。

函数的具体实现在页面对应的js文件中实现

 

(1)显示文字到页面

(2)获取id信息

(3)通过data传递私有信息

可以设置多个data-xxx属性

获取方法:

 

7.Button按钮

参考:https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html

 (1)button类型

 

通过bindtap添加事件绑定

8.基本控件 icon图标

参考链接:https://mp.weixin.qq.com/debug/wxadoc/dev/component/icon.html

9.图片显示

参考链接:https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html

为class下的某个标签设置样式

 

(1)远程图片

(2)本地图片

 

 10.数据绑定

通过代码动态控制页面展示的内容

参考链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html

js文件定义:

 

(1)基本数据绑定

 

(2)条件渲染数据绑定

 

(3)列表渲染数据绑定

 item是内部特有的属性

 

 

 

 

(4)模板数据绑定

 

(5)事件绑定

 

wx:if和hidden的区别:

  wx:if在不满足条件的时候,不显示的部分从DOM树中直接删除了。而hidden则是隐藏了元素,但是元素依然还在。

  在<view>标签中hidden的使用方法是:style="display:none"

  其他标签中可以使用hidden="true"

 

0

11.margin和padding的区别

margin:调节盒子相对其他盒子的距离,针对盒子外部调节

padding:调节盒子内部元素的距离

 

Copyright © 2024 我编程我快乐
Powered by .NET 9.0 on Kubernetes