微信小程序日记(一)

一、基础知识(目录与配置)

  (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()

微信小程序日记(一)

上一篇:Vue 和微信小程序的区别、比较


下一篇:微信小程序资料收集(一)