• 前端 ---- 微信小程序的认识


    1.app.js    
      1.创建App实例对象;创建生命周期函数。当小程序被开启时,自动执行App.js
      2.App.json和App.WXSS....里面的内容是全局共享的,好像不用导入就可以直接用
    2.JS:完成页面逻辑;WXML:基于XML语言来定义页面结构(html);WXSS:完全遵循CSS语法,在设定值的单位这点上比CSS高级。
    3.JS是必有的,不然会报错;WXML也是比有的,不然就毫无意义;WXSS和JSON是可选的
    4.在页面引入中,page 引入的文件是没有后缀的,因为他把JS,WXML,WXSS都引入了进来,是三个文件组成一个网页的
    5.如果文件中有JSON文件,他是用来覆盖App.json里window的内容,改变页面样式
    6.tabBar中,list不能超过5项
    7.JS
    	1.小程序不是运行在浏览器中,所以没有DOM和BOM对象
    		console.log(window) => undefined
    		console.log(document) => undefined
    	2.小程序的JS有一些额外的成员
    		App方法,用来定义应用程序的实例对象
    		Page方法,用来定义页面对象
    		getApp方法,用来获取全局应用程序对象,可以全局得获得里面的对象和方法
    		getCurrentPages方法,用来获取当前页面的调用栈(数组,最后一个是当前页面this)
    		wx对象,用来提供核心API
    	3.小程序的JS是支持CommonJS规范的
    		require和import模块,不支持exports.XXX来导出对象了(每个文档只能使用一次exports.XXX),只支持modules.exports={}来导出对象(这样比较脚)
    8.mustache语法{{}}可以用在	
    	1.innerHtml 也就是标签内容
    	2.元素属性  标签内的属性,但是不用在元素前加“:”直接<div class="{{ class }}">,
    	3.解决语法的误解析 如:一些元素需要绑定布尔值如 checked,不能:checked="false"怎么办呢? 这样 checked="{{ false }}"
    	4.如果需要循环<view wx:for="{{ list }}" wx:key='index' >,不需要定义item和index。直接用就好了。
    	如果全局属性中也有item或index,就不能直接拿到了,但是可以在标签中使用  ws:for-itme = "other",来修改item的名字
    	5.也有wx:if 和v-if一样,通过获得的值的true或false来控制标签是否显示
    9.事件:
    	1.绑定事件  虽然数据是跟Vue一样需要在data{}中定义的,但是方法不用,直接在同级情况下 方法名称: function(){},然后绑定到事件中,但是不能传入参数
    		1.bindtap='handle'  因为小程序没有鼠标可以点击,所以click变成了触碰tap
    		2.catchtap='handle'  触发的方式和所对应的方法不变,但是这样方式可以阻止冒泡
    		绑定事件中所触发的函数中的this不是指触发条件所在的标签而是页面对象
    	2.如果想要传递参数可以通过获取标签中的data属性来获得
    		<button data-name='小明' bindtap='handle0'>点</button>
    
    		handle0: function(e){
    		console.log(e.target.dataset.name)
    		}
    		------------->小明
    10.小程序是单向数据流,没有双向绑定的说法
    	而且即使你通过监听事件改变的方法来触发一个方法使得数据改变,页面上也不会成功渲染出来
    	<input bindinput='inputhandle' value="{{ msg }}" style="border: 1px solid black"/>
    	<text>{{ msg }}</text>
    	
    	inputhandle: function(e){
    		this.data.msg = e.detail.value
    		console.log(this.data.msg)
    		console.log(e.detail.value)
    	}
    	----> this.data.msg和e.detail.value都发生了改变,但是<text>{{ msg }}</text>里的内容没改变,因为页面没有监听这个数据的变化,只渲染一次
    	只能通过以下这个方法来通知页面数据已经改变
        this.setData({
          msg:e.detail.value
        })
    	this.setData是用来改变data数据中的值的,他与直接赋值不一样的是,他可以通知页面做出变化
    
    11.block 不需要在view中以一个绑定wx:if,block就像一个代码容器,但是在实际页面渲染中,页面没有block而是3个view
    	<block wx:if="{{ !show }}">
    		<view><text>11</text></view>
    		<view><text>11</text></view>
    		<view><text>11</text></view>
    	</block>
    	
    12.wx:if  代码不存在,hidden:代码存在渲染隐藏
    13.WXSS中规定每部手机的屏幕尺寸都为 750rpx=20rem
    14.WXML中,标签一定是有始有终的,即使的单标签也要</>。且标签名和属性名只能是小写的
    15.组件: 组件地址:https://developers.weixin.qq.com/miniprogram/dev/component/
    	1.text组件支持文本的换行,直接在视觉效果上换行就行了,不用特殊处理
    	2.如果直接在默认模板中使用progress,进度条是显示不出来的,因为主样式中align-items: center;导致里面的样式都是没有宽度的
    	
    16.flex
    	1.在使用中,先规定固定宽度,然后剩下的在给flex的份额去分(当然,前提要有份额给人分才行,所以要注意父级的宽高)
    17.margin: 0 auto; 让图片居中
    18.页面传值:
    	传:跳转链接的url后加?  url?name='haha'
    	取:在JS中的onLoad中的options拿
    	
    19.如果想然一些图片或其他东西点击时高亮,可以通过给他添加样式 cursor:pointer
    20.navigateBack默认返回上一页,(可以通过里面的参数设置返回哪一页,如果设定值太大默认返回最开始那一页)
    21.如果想给页面整体增加样式,可以选择 page 这个标签来添加样式
    22.在小程序中,如果没有按照图片的比例去设置宽高比,那么图片就会失真,需要通过设置图片的填充方式来改良:如aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
    23.不能通过导航跳转的方式来跳转到tabBar中的路径
    API:
    1.发送异步请求不再使用AJAX
    2.小程序没有跨域的概念,但是为了安全考虑,需要添加可请求的服务器白名单
    3.域名必须备案,服务端必须采用HTTPS
    4.在加载中,需要判断是否在加载,否则会出现加载多次的现象
  • 相关阅读:
    内存屏障指令
    k64 datasheet学习笔记45---10/100-Mbps Ethernet MAC(ENET)之功能描述
    k64 datasheet学习笔记45---10/100-Mbps Ethernet MAC(ENET)之概述
    Haskell 笔记 ③
    UVA 11754 (暴力+中国剩余定理)
    Haskell 笔记 ②
    Haskell 笔记 ①
    HDU 1072(记忆化BFS)
    POJ 2096 (概率DP)
    HDU 4405 (概率DP)
  • 原文地址:https://www.cnblogs.com/otome/p/13704263.html
Copyright © 2020-2023  润新知