微信小程序开发——零基础学习（3）

东阳dy
177 阅读6分钟

1.小程序官方api文档

1.1showToast提示框

image.png


  clickBtn(){
    wx.showToast({
      title:"加载中...",
      icon:"success",
      duration:1500,
      mask:true,
      success:res=>{
        console.log(res);
      }
    })
  }

<button type="primary"  bindtap="clickBtn">按钮</button>
<input type="text" style="padding:20rpx;background:#eee;"> </input>

1.2 showModel和showLoading界面交互的操作

image.png


  onLoad(options) {
    wx.showLoading({
      title:'加载中...',
      mask:true/*将输入框遮蔽 */
    })
    setTimeout(()=>{
      wx.hideLoading()
    },2000)
  },
  clickBtn(){
    wx.showModal({
    title:'请输入验证码',
    // content:'删除之后不可恢复，请谨慎',
    // showCancel:false,
    // cancelColor:"#c00",
    editable:true,
    placeholderText:"请输入...",
    // success:res=>
    /*使用箭头不会出现指向问题 */
    success(res){
      if(res.confirm)
      {
        console.log(res);
      }
      else if (res.cancel){
        console.log('用户点击取消');
      }
    }
    })
  },

image.png

  data: {
    listArr:['A','B','C']

  },
 clickBtn(){
    wx.showActionSheet({
      itemList: this.data.listArr,
      success:(res)=>{
        console.log(this.data.listArr[res.tapIndex])
      },
      fail:(res)=> {
        console.log(res.errMsg)
      }
    })
  },

image.png

案例融合wx.showModal，下面放出修改的部分逻辑代码


  onSubmit(){
    let value =this.data.iptValue
    // console.log(this.data.iptValue);
    let arr = this.data.listArr;
    arr.push({
      /*使用时间戳 */
      id:Date.now(),
      title:value
    })
    this.setData({
      listArr:arr,
      iptValue:""
      /*最后将输入的内容进行清空 */
    })
    wx.showToast({
      title:"发布成功",
      icon:'none'
      })
  },

  clickClose(event){
    wx.showModal({
      title: '是否确认删除',
      success: (res) => {
        if(res.confirm){
          let {index}= event.currentTarget.dataset;
          let arr =this.data.listArr;
          arr.splice(index,1);
          /*进行元素移除 */
          // console.log(arr);
          this.setData({
            listArr:arr
    })
    /*使用return可以将下面代码进行注释 */
  }
}
    })
  },

2.常见的导航栏api接口

image.png

 onLoad(options) {
    wx.setNavigationBarTitle({
      title: 'onload中修改的标题',
    })
    wx.setNavigationBarColor({
      frontColor:"#000000",
      backgroundColor:"#eee"
    })
    wx.hideNavigationBarLoading()
    setTimeout(()=>{
      wx.hideNavigationBarLoading()
    },2000)

    wx.hideHomeButton();
  },

{
  "usingComponents": {},
  "navigationBarTitleText": "api学习"
}

3.全局与页面配置中关于window窗口UI设置

全局配置这里推荐直接看文档小程序配置 / 全局配置 (qq.com),下面列出几个易出错的函数

image.png

    "backgroundColor": "#F6F6F6",
    "enablePullDownRefresh":true,

4.tabBar底部tab栏的配置用法

这一节主要是设置底部的tab栏，具体源码如下


  "tabBar": {
    "color":"#8a8a8a",
    "backgroundColor": "#efefef",
    "borderStyle":"white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./static/images/homepage.png",
        "selectedIconPath": "./static/images/homepage.png"
      },
      {
        "pagePath": "pages/data/data",
        "text": "文章",
        "iconPath": "./static/images/title.png",
        "selectedIconPath": "./static/images/title.png"
      },
      {
        "pagePath": "pages/demo/demo",
        "text": "我的",
        "iconPath": "./static/images/my.png",
        "selectedIconPath": "./static/images/my.png"
      }
    ]
  },

5.api中navigate路由接口与组件的关系

点击进行页面跳转——导航 / navigator (qq.com)

<navigator url="../demo/demo" open-type="reLaunch"> go demo page</navigator>

其中 open-type="reLaunch"可以携带参数

url="../demo/demo?id=123" 最后在页面中显示出来的是这样的

image.png

open-type="switchTab"可以进行跳转，但是不能携带参数

参考资料：api路由 / wx.reLaunch (qq.com)

初始页面（非跳转页面）

<view
bindtap="goDemo"
 style="width:100rpx;height:100rpx; background:#EEE8AA;">
    <view>
    <text></text>
    
    </view>
    <view>
    
    </view>
</view

  goDemo(){
    // wx.reLaunch({
    //   url: '../demo/demo',
    // })
    wx.navigateTo({
      url: '../api/api',
    })
    /*有返回就箭头*/
  },

跳转页面

 onLoad(options) {

    setTimeout(()=>{
      wx.navigateBack()
    },2000)
    /*2s后自动调回（可添加如果失败自动跳转回去）*/
    }

6.【小案例】初识wx.request获取网络请求并渲染至页面

image.png


Page({

  /**
   * 页面的初始数据
   */
  data: {
    listArr:[

    ]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  this.getData();
  },
  getData(){
    wx.request({
      url:'https://api.thecatapi.com/v1/images/search?limit=2',
      success:res=>{
        console.log(res.data);
        this.setData({
          listArr:res.data
        })
      }
    })

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

<view class="out">
  <view class="box" wx:for="{{listArr}}" wx:key="id">
  <view class="pic">
  <image src="{{item.url}}" mode="aspectFill" ></image>
  </view>
      <view class="name">
      姓名：{{item.id}}
      </view>
  </view>

</view>


.out{
  padding:30rpx;
}
.out .box{
  width:100%;
  height:460rpx;
  border:1px solid red;
  margin-bottom:30rpx;
}
.out .box .pic{
  width:100%;
  height:400rpx;
}
.out .box .pic image{
  width:100%;
  height:100%
}
.out .box .name{
  text-align:center;
  line-height: 80rpx;
}

7.【小案例】开启下拉刷新页面enablePullDownRefresh

实现功能：下拉的时候刷新图片

data: {
    listArr:[

    ]

  },
  onLoad(options) {
 
  this.getData();
  },
  /*随机获取getData的网络请求 */
  getData(){
    wx.showLoading({
      title: '加载中...',
      mask:true
    })
    wx.request({
      url:'https://api.thecatapi.com/v1/images/search?limit=2',
      success:res=>{
        console.log(res.data);
        this.setData({
          listArr:res.data
        })
        /*结束刷新直接使用这个 */
        wx.stopPullDownRefresh()
        // setTimeout(()=>{
        //   wx.hideLoading()
        // },2000)
      },
      /*无论成功/失败都会刷新 */
      complete:err=>{
        wx.hideLoading()
      }
    })
  },
    onPullDownRefresh() {
    /*先把数组进行清空，然后再重新进行刷新 */
    this.setData({
      listArr:[]
    })
    // console.log(123);
    this.getData();
  },

{
  "usingComponents": {},
  "enablePullDownRefresh":true,
  "backgroundColor":"#00B26A",
  "backgroundTextStyle":"light"
}

8.【小案例】触底加载更多数据onReachBottom

  "onReachBottomDistance": 200

 /*随机获取getData的网络请求 */
  getData(){
    wx.request({
      url:'https://api.thecatapi.com/v1/images/search?limit=2',
      success:res=>{
        console.log(res.data);
        let oldData = this.data.listArr;
        let newData = oldData.concat(res.data)
        /*将数据进行拼接 */
        this.setData({
          listArr:newData
        })
        /*结束刷新直接使用这个 */
        wx.stopPullDownRefresh()
        // setTimeout(()=>{
        //   wx.hideLoading()
        // },2000)
      },
      /*无论成功/失败都会刷新 */
      complete:err=>{
        wx.hideLoading()
        wx.hideNavigationBarLoading()
      }
    })
  },
  
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  /*下拉刷新 */
  onPullDownRefresh() {
    /*先把数组进行清空，然后再重新进行刷新 */
    this.setData({
      listArr:[]
    })
    // console.log(123);
    this.getData();
  },
    /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    wx.showNavigationBarLoading()
    this.getData();
  },

9.wx.request的其他参数

// pages/api3/api3.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getData();
  },
  getData(){
    wx.request({
      url:'http://jsonplaceholder.typicode.com/posts',
      method:"post",
      header:{"content-type":"application/json","token":123123123123},
      data:{
        name:"我是云开发",
        age:18
      },
      success:res=>{
        console.log(res);
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

10.【小案例】网络请求及表单采集综合练习

image.png

Page({

  /**
   * 页面的初始数据
   */
  data: {
    iptVal:"",
    listArr:[]

  },

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

  },
  getData(){
    wx.request({
      url:'https://tea.qingnian8.com/demoArt/get',
      method:'post',
      header:{"Content-Type":"application/json"},
      data:{
        num:3,
        page:1
      },
      success:res=>{
        console.log(res);
        this.setData({
          listArr:res.data.data
        })
      }
    })
  },
  onSubmit(){
    console.log(this.data.iptVal);

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

<view class="out">
  <view class="form">
    <input model:value="{{iptVal}}" class="text" placeholder="请输入标题" bindconfirm="onSubmit"></input>
  </view>

    <view class="row" wx:for="{{listArr}}" wx:key="_id" >
          <view class="username">
          标题：{{item.title}}
          </view>
          <view class="time">时间:{{item.posttime}}</view>
    </view>

</view>


.out{
  padding:30rpx;
}
.out .row{
  padding:15rpx;
  border-bottom:1px solid #ccc;
  
}

11.【小案例】页面交互增加友好体验

  /**
   * 页面的初始数据
   */
  data: {
    iptVal:"",
    listArr:[]

  },

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

  },
  getData(){
    wx.request({
      url:'https://tea.qingnian8.com/demoArt/get',
      method:'post',
      header:{"Content-Type":"application/json"},
      data:{
        num:3,
        page:1
      },
      success:res=>{
        console.log(res);
        this.setData({
          listArr:res.data.data
        })
      }
    })
  },
  onSubmit(){
    console.log(this.data.iptVal);
    wx.request({
      url:'https://tea.qingnian8.com/demoArt/add',
      method:"post",
      header:{"Content-Type":"application/json"},
      data:{
        title:this.data.iptVal
      },
      success:res=>{
        console.log(res);
        if(res.data.errCode!=0){
          return;
        }
        this.setData({
          iptVal:""
        })
        this.getData();
        wx.showToast({
          title:res.data.errMsg
        })
      }
        })

  },

<view class="out">
  <view class="form">
    <input model:value="{{iptVal}}" class="text" placeholder="请输入标题" bindconfirm="onSubmit"
    style="padding:20rpx;background:#eee;margin-bottom:20rpx;"
     ></input>
  </view>

    <view class="row" wx:for="{{listArr}}" wx:key="_id" >
          <view class="username">
          标题：{{item.title}}
          </view>
          <view class="time">时间:{{item.posttime}}</view>
    </view>

</view>

.out{
  padding:30rpx;
}
.out .row{
  padding:15rpx;
  border-bottom:1px solid #ccc;
  
}

12.自定义组件Component的用法

12.1 component 用法

12.1.1步骤

  1. 学习本组件的用法之前，首先要在component右击，新建文件夹（命名之后），再次右击component，新建component，之后会自动生成4个文件（.js/.json/.wxml/.wxss），如下图所示

image.png

2.配置相关组件位置 在app.json中进行全局配置（所有文件都适用）

image.png

在其他文件夹中，则在.wxml文件中可以添加组件进行单独配置 如：

<MyHeader ></MyHeader>

3.组件内容单独配置

image.png

<view class="header">
<view class="big">
头部大标题
</view>
  <view class="small">
  咸虾米的小程序开发
  </view>
</view>



.header{
  text-align:center;
  padding:30rpx;
  background:#eee;
}
.header .big{
  font-size:50rpx;
}
.header .small{
  font-size:38rpx;
  margin-top:20rpx;
  color:#666;
}

image.png

<view class="footer">
<view class="title">底部信息</view>
<view class="small">版权信息{{name}}</view>
</view>
<!--组件创建-->

.footer{
  background: #424242;
  color:#fff;
  padding:50rpx;
  text-align:center;
}
.footer .title{
  font-size:52rpx;

}
.footer.small{
  font-size:32rpx;
}

同时可以通过.js 文件里的data进行信息补充

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name:{
      type:String,
      value:"------"
    }

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

通过各文件夹.wxml文件配置组件，可以对component组件中的value进行覆盖

<!--将原本组件中的值进行覆盖-->
<MyFooter name="-我的"></MyFooter>
avatar
文章
阅读
粉丝