小程序常用

1、页面跳转

//wxml页面 
<view class="moto-container" bindtap='onTap'>
    <text class="moto">开启小程序之旅</text><!-- catchtap='onSubTap'阻止冒泡-->
</view>
//js页面
Page({
    onTap:function(event){
        // 父级被关闭 执行onUnload
        // 关闭当前页面，跳转到应用内的某个页面
        wx.redirectTo({
            url:"../posts/post"
        });

        //从一个页面跳转到另一个页面，最多跳5级 父级被隐藏执行onHide
        wx.navigateTo({
            url: 'String',//页面跳转地址
            wuccess:function(res){
            success //跳转成功执行函数
        },
        fail:function(){
            //fail //跳转失败执行函数
        },
        complete:function(){
            complete //跳转成功失败都执行函数
        }
    }
});

或者

//hover-class="none"点击没有阴影
<navigator url = "/pages/new/new" hover-class="none">新闻</navigator>
<navigator url = "/pages/new/new" open-type = "redirect">新闻</navigator>
<navigator url = "/pages/new/new" open-type = "switchTab">新闻</navigator>

 

2、设置placeholder的颜色

<input type="text" name="username" placeholder-class="phcolor" placeholder="学生姓名" />
.phcolor{
    color: #56abe9;
}

3、循环

<block wx:for="{{postsData}}" wx:for-item="item" wx:for-index="index">
    <view>
        <text>{{item.title}}{{index}}</text><!--这是子元素的序号-->
    </view>
    <view>
        <image class="img2" src="{{item.imgSrc}}"></image>
    </view>
</block>

4、引入其它页面js

//posts-data.js
//上边是虚拟的数据把这个文件当做小型数据库
var local_database = [
    {},{}
]
//var a = "2"
module.exports = {//通过这个输出到别的脚本文件内
  postList: local_database,
  //a_key: a 
}
<!-----------------------分割线-------------------------->
var postsData = require('../data/posts-data.js');//只能用相对路径，不能用绝对路径
Page({
    data:{
        //小程序总是会读取data对象来做数据绑定，这个动作我们称为动作A
        //而这个动作A的执行，是在onLoad事件执行后发生的
    },
    onLoad: function (options) {
    //页面初始化  
    
    this.setData({
      post_key:postsData.postList
    });//绑定数据，这句话等同于把这段话放到data里面了，很重要
  },
})

5、引入css模板

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

<!--模板-->

<template name="postItem">

</template>

引入wxml文件

<import src="../post-item/post-item-template.wxml" />
<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
    <template is="postItem" data="{{item}}" />
    <!--模板在循环内用data="{{item}}"代替外层的item(postList)-->
</block>
//导入js
var postsData = require('../data/posts-data.js');

//图片高度自适应

wxss先给个宽度100%；然后<image mode="widthFix">

6、控制是否显示

//js内
{
    display : false //注意这里不加引号
}

<!--wxml内-->
 wx:if="{{ display }}" 

7、数据绑定

  onLoad: function (options) {
    //页面初始化  
    var post_content1={
      title1: "国鸣数据",
      title2: "国鸣数据",
      display: false,
      img: {
        imageUrl4: "/images/banner4.jpg",
        imageUrl3: "/images/banner3.jpg",
        imageUrl2: "/images/banner2.jpg",
        imageUrl1: "/images/banner1.jpg"
      },
    }
    this.setData(post_content1);//绑定数据，这句话等同于把这段话放到data里面了，很重要
  },


<!--wxml-->
<image class="img1" src="{{ img.imageUrl1 }}"></image>
<text class="txt2">{{ title1 }}</text>

8、数据缓存的设置与获取以及删除一个和全部删除，4种操作，每种操作2种同步异步的方法

  onLoad: function(options) {
    var postId = options.id;
    var postData = postsData.postList[postId];
    this.data.postData = postData;
    console.log(postData);
    //缓存4种操作，同步异步，8种方法，
    // wx.setStorageSync("key", "风暴英雄")//设置缓存,缓存最大不能超过10M
    wx.setStorageSync("key0", {
      game: "风暴英雄0",
      developer: "暴雪0"
    }),
    wx.setStorageSync("key1", {
      game: "lol",
      developer: "英雄联盟"
    })
  },
  onCollectionTap:function(event){
    var game = wx.getStorageSync('key')//获取缓存
    console.log(game);
  },
  onShareTap:function(event){
    // wx.removeStorageSync('key')//删除指定键的缓存  
    wx.clearStorageSync();//删除所有缓存 
  }

<view catchtap="onCollectionTap">收藏</view><!--catchtap="onCollectionTap"事件响应函数-->
<view catchtap="onShareTap">分享</view>