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,
}
网友评论