zoukankan      html  css  js  c++  java
  • 微信小程序日记(一)

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

      (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()
  • 相关阅读:
    向强大的SVG迈进
    手把手教你写个小程序定时器管理库
    蒲公英 · JELLY技术周刊 Vol.11 Lighthouse 测试报告生成
    ES6语法——let和const
    北京天地益星面经
    JS的数据类型你真的懂了吗
    北京MedPeer凉经
    flex布局语法+实例
    面试官问:你有多少种方式实现三栏布局?
    CSS粘性定位
  • 原文地址:https://www.cnblogs.com/legendheng/p/9426831.html
Copyright © 2011-2022 走看看