微信小程序练习笔记（更新中。。。）

微信小程序练习笔记

微信小程序的练习笔记，用来整理思路的，文档持续更新中。。。

案例一：实现行的删除和增加操作

test.js

// 当我们在特定方法中创建对象或者定义变量给与初始值的时候，它是局部的，是无法被其他方法所使用的
// 初始数据赋值
var initData = "this is first line\n this is second line"
var listData = [];
Page({
  // 初始数据复制
  data: {
    text: initData
  },
  // 自定义添加方法
  add: function(e) {
    // 对于listData进行数据处理使用的push方法
    listData.push("other line")
    // 通过setData方法进行赋值操作 this表示当前对象
    this.setData({
      text: initData + "\n" + listData.join("\n")
    })
  },
  remove: function(e) {
    // 处于业务逻辑考虑，我们需要进行一个判断，防止误删
    if (listData != null) {
      // 对于listData进行数据处理使用的pop方法进行删除
      listData.pop("other line")
      // 通过setData方法进行赋值操作，this表示当前对象
      this.setData({
        text: initData + "\n" + listData.join("\n")
      })
    } else {
      this.setData({
        text: "没有新增的行了，所以删除全部行"
      })
    }
  }
})

View Code

test.wxml

<!-- view相当于我们html的div属于块元素 -->
<!-- html中大多数的选择器都是可以使用的，但是我们微信小程序的默认编码习惯是只设置类选择器 -->
<!-- 归根结底就是做我们的页面样式控制 -->
<view class="btn_area">
  <view class="btn_body">
    <!-- text标签相当于我们html中的span属于行内元素 -->
    <!-- 我们可以使用{{js的变量名}}显示我们的js中赋值的初始数据 -->
    <text>{{text}}</text>
    <!-- 创建按钮进行事件触发 -->
    <!-- bindtap绑定我们的的js方法 -->
    <button bindtap="add">添加行</button>
    <button bindtap="remove">删除行</button>
  </view>
</view>

View Code

案例二：实现页面的跳转与返回操作

index.wxml

<!-- 第二步创建跳转页面一（也就是我们的首页） -->
<view class="btn-area">
<!-- url指定我们的跳转页面，对应的使用？占位符的方式带了一个参数title -->
<!-- 使用hover-class属性增加了我们的点击样式改变了点击颜色 -->
  <navigator class="nv1" url="/nv/nv?title=nv" hover-class="nv-hover">
    跳转到nv页面
  </navigator>
    <navigator class="re1" url="/re/re?title=re" hover-class="re-hover" open-type="redirect">
    跳转到re页面
  </navigator>
</view>

View Code

index.wxss

/* 添加我们的点击样式 */
.btn-area{
  margin-left: 250rpx
}


.nv-hover {
  color: blue;
}

.re-hover {
  color: red;
}

.nv1 {
  color: red;
  width: 250rpx;
  text-align: center;
  border: 1px solid red;
  margin-top: 500rpx;
}

.re1 {
  color: blue;
  width: 250rpx;
  text-align: center;
  border: 1px solid blue;
}

View Code

nv.js

// nv/nv.js
Page({


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (op) {
    console.log(op)
    // 使用我们的setData方法把我们传过来的参数初始加载到我们的页面
    this.setData({
      text:op.title
    })
  },

  
})

View Code

nv.wxml

<!-- 页面展示，提示怎么返回上一级页面（也就是我们的跳转过来前的页面） -->
<view class="v1">
  <text>这是我们从上一个页面传过来的参数【{{text}}】</text>
  <text>点击左上角可以返回上级界面此处可以不用设置跳转</text>
</view>

View Code

nv.wxss

.v1{
  color: red;
  text-align: center;
  border: 1px solid red;
  margin-top: 500rpx
}

View Code

re.js

// re/re.js
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      text:options.title
    })
  }
})

View Code

re.wxml

<!--re/re.wxml-->
<view class="v1">
  <text>这是我们从跳转页面传过来的参数【{{text}}】</text>
  <view>
    <text>改变跳转方式，我们从此页面无法点击左上角进行返回</text>
    <navigator url="/index/index" open-type="redirect">返回上级页面</navigator>
  </view>
</view>

View Code

re.wxss

.v1{
  color:blue;
  text-align: center;
  border: 1px solid blue;
  margin-top: 400rpx
}

View Code

全部代码

配置

{
  "pages": [
   "board/board",
   "serach/serach",
   "profile/profile",
   "index/index",
   "nv/nv",
   "re/re",
   "list/list"
  ],
  "tabBar":{
    "color":"red",
    "selecteColor":"green",
    "borderStyle":"black",
    "backgroundColor":"#ccc",
    "list":[
      {
        "pagePath":"board/board",
        "iconPath":"image/board.png",
        "selectedIconPath":"image/board-actived.png",
        "text":"榜单"
      },
    {
        "pagePath": "serach/serach",
        "iconPath": "image/search.png",
        "selectedIconPath": "image/search-actived.png",
        "text": "接口"
    },
     {
        "pagePath": "profile/profile",
        "iconPath": "image/profile.png",
        "selectedIconPath": "image/profile-actived.png",
        "text": "入口"
    }
    ]
  },



  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Hello World",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

app.json

轮播图

// board/board.js
Page({

  /**
   * 页面的初始数据
   */
data: {
    imgUrls: [
      \'/image/背景.jpg\',
      \'/image/国旗.jpg\',
      \'/image/二次元4.1.jpg\'
     
    ],
    indicatorDots: true,
    interval: 2000,
    duration: 2000,
    indicatorColor: \'rgba(96,96,96,.3)\',
    indicatorActiveColor: \'#FF8C00\',

    boards:[
      { key: \'in_theaters\', name: \'正在热映\' },
      { key: \'coming_soon\', name: \'即将上映\' },
      { key: \'top250\', name: \'T0P250\' },
      { key: \'us_box\', name: \'北美票房榜\' },

    ]



  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

board.js

<!--board/board.wxml-->
<view class="head">
<swiper indicator-dots="{{ indicatorDots}}" autoplay="ture" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:for-item=\'it\'>
    <swiper-item>
        <image src="{{it}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>

  <view class="header">
    <text class="title">豆瓣电影榜单</text>
    <text class="de">豆瓣出品 仅供娱乐</text>
  </view>
  <view class="body">
    <scroll-view scroll-y="true" height="100%">
      <block wx:for="{{boards}}">
        <navigator url="../list/list?type={{item.key}}&title={{item.name}}">
          <view class="board">
            <view class="board-info">
              <text class="board-name">{{item.name}}</text> 
              <image class="board-img" src="/image/arrowright.png"></image>
            </view>
          </view>
        </navigator> 
      </block>
    </scroll-view>
  </view>
</view>

board.wxml

/* board/board.wxss */

.head{
line-height: 1;
}
.body{
  padding-left: 30rpx;
  padding-right: 30rpx;
  flex: 1;
  overflow: auto;
}
.header{
  padding: 40rpx 80rpx 20rpx;
}
.title{
  display: block;
  font-size: 50rpx;
}
.de{
  display: block;
  margin-top: 30rpx;
  color: #888;
  font-size: 28rpx;
}
.board{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  background-color: #FBF9FE;
  overflow: hidden;
  border-radius: 4rpx;
  cursor: pointer;

}
.board-info{
  display: flex;
  padding: 40rpx;
  align-items: center;
  flex-direction: row;
}
.board-name{
  flex:1；
}
.board-img{
  width:32rpx;
  height:32rpx;
}

board.wxss

跳转页面

// index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      imgUrls:[
        \'/image/ccq.png\',
        \'https://i.cnblogs.com/EditGalleries.aspx?catid=1538321\',
        \'https://www.cnblogs.com/cainiao-chuanqi/gallery/image/258134.html\',
        \'https://www.cnblogs.com/cainiao-chuanqi/gallery/image/258137.html\',
        \'https://i.cnblogs.com/EditGalleries.aspx?catid=1532380\'

      ],
      indicatorDots:true,
      interval:2000,
      duration:2000,
      indicatorColor:\'rgba(96,96,96,.3)\',
      indicatorActiveColor:\'#FF8C00\'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

index.js

<!-- 第二步创建跳转页面一（也就是我们的首页） -->
<view class="btn-area">



<swiper indicator-dots="{{ indicatorDots}}" autoplay="ture" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:for-item=\'it\'>
    <swiper-item>
        <image src="{{it}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>


<!-- url指定我们的跳转页面，对应的使用？占位符的方式带了一个参数title -->
<!-- 使用hover-class属性增加了我们的点击样式改变了点击颜色 -->
<view class="nv1">
  <navigator  url="/nv/nv?title=nv" hover-class="nv-hover">
    跳转到nv页面
  </navigator>
  </view>
  <view class="re1">
    <navigator url="/re/re?title=re" hover-class="re-hover" open-type="redirect">
    跳转到re页面
    </navigator>
  </view>
</view>

index.wxml

/* 添加我们的点击样式 */



.btn-area{
  margin-left: 250rpx
}


.nv-hover {
  color: blue;
}

.re-hover {
  color: red;
}

.nv1 {
  color: red;
  width: 250rpx;
  text-align: center;
  border: 1px solid red;
  margin-top: 500rpx;
}

.re1 {
  color: blue;
  width: 250rpx;
  text-align: center;
  border: 1px solid blue;
}

index.wxss

List电影列表

// list/list.js
Page({
  data:{
    list:[],
    loading:false,
    title:"正在加载中。。。"
  },
  onLoad:function(options){
    const apiUrl = "https://douban.uieee.com/v2/movie/" + options.type
    const _this = this
    wx.request({
      url: apiUrl,
      header:{
        \'Content-Type\':\'json\'
      },
      success:function(res){
        _this.setData({
          list:res.data.subjects,
          title:res.data.title,
          loading:false
        })
      }
    })
  }
})

list.js

 1 <loading hidden="{{!loading}}">
 2   加载中，请稍等。。。
 3 </loading>
 4 <view class="header">
 5   <text>{{title}}</text>
 6 </view>
 7 <view class="list">
 8   <navigator wx:for="{{list}}" url="../item/item?id={{item.id}}">
 9     <view class="list-item">
10     
11     <div id="rights">
12       <image src="{{item.images.small}}"></image>
13     </div>
14 
15       <view class="info">
16       <div id="zhong1">
17         <text>{{item.original_title}} ( {{item.year}} )</text>
18       </div>
19        <div id="zhong2">
20         <span>导演：
21           <block wx:for = "{{item.directors}}">
22             {{item.name}}
23           </block>
24         </span>
25         </div>
26 
27       </view>
28 
29       <view class="rating">
30         <text>{{item.rating.average}}</text>
31       </view>
32     </view>
33   </navigator>
34 </view>
35 
36 
37 
38 
39 <!-- <loading hidden="{{!loading}}">
40   加载中，请稍等。。。
41 </loading>
42 <view class="header">
43   <text></text>
44 </view>
45 <view class="list">
46   <navigator url="../item/item?id={{item.id}}">
47     <view class="list-item">
48       <image src="/image/二次元4.1.jpg"></image>
49       <view class="info">
50         <text>{{item.original_title}} (红红火火恍恍惚惚)</text>
51         <span>导演：
52           <block >
53            啦啦啦
54           </block>
55         </span>
56       </view>
57       <view class="rating">
58         <text>9</text>
59       </view>
60     </view>
61   </navigator>
62 </view> -->

list.wxml

.header{
text-align: center;
font-size: 60rpx;
background-color:     rgb(170, 16, 11);
border-radius: 80rpx;
margin-bottom:30rpx; 
color: white;
}

.list-item image{
  float: left;
  w

客服电话

电子邮件

微信小程序练习笔记

案例一：实现行的删除和增加操作

案例二：实现页面的跳转与返回操作

全部代码

配置

轮播图

跳转页面

List电影列表

请发表评论

全部评论

上一篇：

下一篇：

亲亲特价:怎么删除回收站图标

亲亲特价:怎么删除回收站图标

关于我们

产品与服务

解决方案

139-2527-9053