微信小程序日记

Posted 2020-12-28 legendheng

一、基础知识（目录与配置）

　　（1）标签

　　　　小程序的view相当于html的div标签一样，作占位

　　（2）每一个页面都需要在app.json里面注册，例如：

{　　
　　{
　　　　"pages": [
　　　　"pages/posts/posts",
　　　　"pages/welcome/welcome" 
　　]
}

　　优先需要启动显示的页面放在第一位，该例子会先显示posts.wxml

　　（3）每一个页面对应一个目录，且目录下的文件名要一样

　　（4）app.json可以配置所有属性，而页面目录下的json只能配置window属性，所以在页面文件夹的json文件只需写需要配置的信息，不许要加上window

　　（5）配置全局变量　　　

　　　　①在app.js添加全局值
　　　　　　globalData: {
　　　　　　　　douBan:"https://api.douban.com"
　　　　　　}
　　　　②在需要调用的js引入全局值
　　　　　　var app=getApp();
　　　　③获取具体指
　　　　　　app.globalData.douBan

 

二、常用属性

　　（1）数据绑定

　　　　①定义参数值

　　　　this.setData({
      		postdata: postData
    	});

　　　　②调用参数值

　　　　普通的获取绑定数据格式{{data}}，而凡是标签属性都要加引号wx:if="{{post_data}}"，

　　（2）If根据变量控制标签显示或隐藏：

　　　　在具体标签里面加wx:if="{{img_condition}}"，condition是数据绑定为布尔值

　　（3）For循环渲染数据：

　　　　①后台返回数据格式如下：　　

　　　　　　post_data=[
      			{
        			date: "Sep 12 20",
        			title: "我是谁！",
     	 		},
      			{
       	 			date: "Dec 10 02",
       	 			title: "你是谁！",,
      			}
    		];

　　　　②小程序调用如下：

<block wx:for="{{post_key}}" wx:for-item="item" wx:for-index="idx"></block>

　　（4）事件绑定：

　　　　　①在点击标签加上

bindtap=‘onTap‘

　　　　　②js里面编写 onTap函数

onTap:function(){
    console.log("点击了")
},

　　（5）页面跳转和传参：

　　　　①存在子父关系，可返回

wx.navigateTo({
      	url: ‘../posts/posts?postid=‘+postid,
 })

　　　　而此时会触发生命周期的onhide函数

　　　　②不存在关系，不可返回

wx.redirectTo({
      	url: ‘../posts/posts?postid=‘+postid,
})

　　　　而此时会触发onunload函数

　　（6）事件冒泡与非冒泡

　　　　冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
　　　　非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递
　　　　子元素想要阻止父元素冒泡可以使用catchcap替换bindtap，一般都是用bindtap

 

三、模板template　

　　①编写模板，在post-item-template.wxml编写模板，格式如下：　　

<template name="postItem"> 内容 </template>

　　②引入模板，在页面的wxml头部引入模板，格式如下：

<import src="posts-item/post-item-template.wxml" />

　　③添加模板，格式如下：

<template is="postItem" data="{{item}}" />这里的is就是对应模板的name名称

　　④模板引入样式。格式如下

@import "posts-item/post-item-template.wxss";

 

四、显示正在下拉效果

wx.showNavigationBarLoading();

　　

五、缓存（上限10M，会永久保存）

　　①设置缓存：

wx.setStorageSync("test", {
　　　　　　　　　　game : "test",
　　　　　　　　　　deve : "wer"
})　

　　②获取缓存：

wx.getStorageSync("test")；

　　③清楚某个缓存：

wx.removeStorageSync("test")

　　④清除所有缓存：

wx.clearStorage()