美文网首页
微信小程序:基础知识

微信小程序:基础知识

作者: 五四青年_4e7d | 来源:发表于2020-02-06 22:08 被阅读0次

options

options可以作为生命周期的参数传递,同时可以打印参数,判断项目是从哪个渠道进入应用:

onLaunch: function (options) {
    console.log(options)
}

应用的生命周期:

(1)onLaunch: 初始化小程序时触发,全局只触发一次
(2)onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
(3)onHide: 用户从前台切换到后台隐藏时触发
(4)onError: 小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息

页面的生命周期:

(1)onload:适合做页面的初始化
(2)onShow: 页面进入焦点状态
(3)onHide:
(4)onReady:当页面准备好了
(5)onUnload:当页面销毁

小程序常见的标签:

<text></text>
<input velue=""/>
<view></view>
<navigator></navigator>
<checkbox  checked="{{false}}"></checkbox>
<block></block>  //包装元素


<wxs module="foo">
//导出一个对象直接在界面使用
module.exports = {
fn:function(input){
return input + wxs
}
}
//使用:<text>{{foo.fn(message)}}</text>
</wxs>

循环渲染:

<view>
  <!-- 如果没有指定key属性 可以使用wx:key="*this" -->
  <view wx:for="{{student}}"  wx:key="id" wx:for-item="s"   wx:for-index="i" >
     <text>{{i}}</text>
     <text>{{s.name}}</text>
  </view>
</view>

hidden属性用于切换元素的显示或者隐藏:

 <text hidden="{{falg}}">dd</text>
//逻辑层:
Page({
  data: {
    falg:false,
  },
})

事件函数的定义:

<button bindtap="tapHandle"  data-id="1">点击</button>
<button bindtap="tapHandle"  data-id="2">点击</button>
//可以通过自定义属性的方式给事件传递不同的参数
Page({
  data: {
  },
  tapHandle(e){
    //e指的是事件的参数
    console.log(e)
  }
})

页面使用应用的样式文件导入:

@import   "../../app.wxss"

小程序轮播图:

<!-- 轮播图 -->
<swiper class="slides" autoplay="auto" interval="3000"  indicator-dots="true"  indicator-active-color="#888">
    <swiper-item>
        <image src="/assets/img/ti1.jpg" mode="aspectFill"/>
    </swiper-item>
    <swiper-item>
        <image src="/assets/img/ti2.jpg" mode="aspectFill"/>
    </swiper-item>
    <swiper-item>
        <image src="/assets/img/ti3.jpg" mode="aspectFill"/>
    </swiper-item>
</swiper>

根据接口请求轮播图数据:

<!-- 轮播图 接口请求数据-->
<swiper hidden="{{falg}}"   class="slides" autoplay="auto" interval="3000" indicator-dots="true" indicator-active-color="#888" >
    <swiper-item wx:for="{{slides}}">
        <image src="{{item.image}}" mode="aspectFill" />
    </swiper-item>
</swiper>

数据请求:

 onLoad: function (options) {
    wx.request({
      url: 'https://api.apiopen.top/getWangYiNews',
      method: 'post', 
      success: res =>{
       console.log(res)
       this.setData({slides:res.data.result})
      },
    })
  },

使用promise封装公共请求接口:

// 使用promise封装全局公共接口:
module.exports = (url,data) =>{
    return new Promise((resolve,reject) =>{
        wx.request({
            url: `https://api.apiopen.top/${url}`,
            success: resolve,
            fail: reject
        })
    })
}

//导入:
const fetch = require('../../utils/fetch')
//使用:
onLoad: function (options) {
      fetch('getWangYiNews').then(res =>{
        this.setData({slides:res.data.result}) 
      })
    },

页面之间的跳转传递参数

 <navigator url="/pages/list/list?cat={{item.id}}" class="item">跳转</navigator>
// list.js取参数:
onLoad:function(options){
console.log(options)
},


三元运算表达式:

<text>{{ 10%2===0 ? '偶数' : '奇数'}}</text>

if else循环判断:

<view wx:for="{{arrs}}">
    <text wx:if="{{item.age == 20 }}">{{item.name}}</text>
    <text wx:elif="{{item.age > 20 }}">{{item.name}}</text>
    <text wx:else>{{item.name}}</text>
</view>

点击“我的”判断是否登录:

//  用户是否登陆app.js
  appData:{
    userInfo: null
  }
//“我的”页面js
onLoad: function () {
//如果当前用户为空,跳转到登录首页
    if(app.appData.userInfo == null){
      wx.redirectTo({url: '../login/login',})
    }

组件:

//图标:
<icon type="success" />   
//进度条:
 <progress percent="20" show-info="true" />

显示头像和用户名:

<view bindtap="clickImg" class="userInfo">
<image class="userInfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover" />
      <text class="userInfo-nickName">{{userInfo.nickName}}</text>
  </view>

图片选择用户拍照:

//html
 <view bindtap="clickImg" class="userInfo">
 <image class="userInfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover" />
 <image class="userInfo-avatar" src="{{avatarUrl}}" background-size="cover" />
 <text class="userInfo-nickName">{{userInfo.nickName}}</text>
 </view>
//事件:
 clickImg:function(){
         var that = this;
        wx.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success (res) {
            // tempFilePath可以作为img标签的src属性显示图片
            const tempFilePaths = res.tempFilePaths
            console.log(tempFilePaths)
            that.setData({ avatarUrl:tempFilePaths[0] })
          }
        })
       }
//数据:
data: {
    avatarUrl:null,
}

相关文章

网友评论

      本文标题:微信小程序:基础知识

      本文链接:https://www.haomeiwen.com/subject/rvuyxhtx.html