一、模块化操作
1.common.js规范
config,js
// 统一管理所有常量
const url = "http://localhost"
const port = "3000"
// 导出
// commonjs
module.exports = {
url,port
}
页面使用
//引入
//commonjs
let config = require('../../utils/config')
console.log(config);
2.es6规范
1、export
// 统一管理所有常量 config。js
const url = "http://localhost"
const port = "3000"
// 导出
export {
url,port
}
2.export default
// 导出
export default{
url,port
}
// es6
// import {url,port} from "../../utils/config"
// console.log(url,port);
import config from "../../utils/config"
console.log(config);
二、自定义组件
1.概述
小程序支持简洁的组件化编程，开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；自定义组件在使用时与基础组件非常相似。
自己封装一个组件
2.创建自定义组件
类似于页面一样，一个自定义组件由 json wxml wxss js 4个文件组成；要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）
如:
{
//组件
"component": true
}
创建步骤：
1.新建文件 组件的总文件 components
2.新建文件 我的按钮 组件 my-button
3.右键 新建component
3.组件的引用
（1）局部引用
xx.json
{
"usingComponents": {
"my-button":"/components/my-button/my-button"
}
}
（2）全局引用
app.json
{
"pages":[
"pages/zujian/zujian",
"pages/mokuai/mokuai",
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#f00",
"navigationBarTitleText": "常用api",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"usingComponents": {
"my-button":"/components/my-button/my-button"
}
}
（3）Page使用
xx.wxml
<my-button></my-button>
4.组件的基本语法
（1）样式操作
- 和wxss语法大致一样
- 选择器只能支持class选择器
.red{
background-color: #00f;
}
（2）私有数据绑定
data:内部私有的数据，内部才能修改
代码案例：
<view class="red" bindtap="_click">自定义组件的内容---{{msg}}</view>
/**
* 组件的初始数据，私有的属性，外部不能修改
*/
data: {
msg:"按钮"
},
（3）自定义事件
代码案例：
/**
* 组件的方法列表
*/
methods: {
_click(){
this.setData({
msg:"1"
})
}
}
（4） properties组件对外开放属性
properties 简介
组件的对外属性，用来接收外界传递到组件中的数据,组件的 properties 和 data 的用法类似，它们都是可读可写的。
- data更倾向于存储组件的私有数据
- properties存储外界传递过来的数据
properties 语法结构
properties: {
msg: { // 属性名
type: String, // 属性的数据类型
//optionalTypes: [String,Number] //多个数据类型
value: '' // 默认值
}
}
**注意：type 的可选值为 Number，String、Boolean、Object、Array、null(表示不限制类型)**
向组件传递 properties
页面使用自定义组件：
<!-- 我的组件
size
default 200*120
mini 100*60
color
#ccc
any
-->
<my-button size="mini" color="yellow"></my-button>
自定义组件：
/**
* 组件的属性列表,对外开放的属性
*/
properties: {
size:{
type:String,
value:'default'
},
color:{
type:String,
value:"#ccc"
}
}
<view class="{{size}}" style="background-color:{{color}}">
</view>
.default{
width: 200px;
height: 120px;
}
.mini{
width: 100px;
height: 60px;
}
5.slot插槽使用
4.1默认插槽
在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。
代码案例：
<view class="{{size}}" style="background-color:{{color}}">
<slot></slot>
</view>
4.2多个插槽
自定义组件：
Component({
/**
* 组件的属性列表,对外开放的属性
*/
options:{
multipleSlots:true
},
}
<view class="{{size}}" style="background-color:{{color}}">
<!-- <slot></slot> -->
<slot name="bef"></slot>
<slot name="after"></slot>
</view>
使用组件的页面
<my-button size="mini" color="yellow">
<text slot="after">按钮</text>
<text slot="bef">11</text>
</my-button>
三、常见的api
API（Application Programming Interface，应用程序接口）是一些预先定义的接口（函数），目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。
小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
1.Api的分类
1)同步
以Sync结尾的api
通过函数返回值直接获取结果
2）异步
大多数都是异步api
异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。
注意事项
部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera（小游戏）本身就有返回值， 它们的 promisify 需要开发者自行封装。
3）监听
以on开头的api用来监听某个事件是否触发
2.系统信息Api
代码案例：
// 获取设备信息
_getSystemInfo(){
// 同步 返回值就是执行结果
// let res = wx.getSystemInfoSync()
// console.log(res);
// 异步 成功回调 执行结果
wx.getSystemInfo({
success(res){
console.log(res);
}
})
}
3.界面的api
3.1导航栏
代码案例：
// 动态设置当前页面的标题
wx.setNavigationBarTitle({
title:"导航122"
})
// 设置页面导航条颜色
wx.setNavigationBarColor({
backgroundColor:"#00f",
frontColor:"#ffffff"
})
wx.showNavigationBarLoading()
//隐藏home图标小房子
wx.hideHomeButton({
success: (res) => {},
})
3.2交互类
代码案例：
// 操作菜单
_showActionSheet() {
wx.showActionSheet({
itemList: ['去拍照', '去相册'],
itemColor: "red",
success(res) {
console.log(res);
// 获取选中选项的下标，自己做判断
if (res.tapIndex == 0) {
console.log('拍照');
} else if (res.tapIndex == 1) {
console.log('去相册');
}
}
})
},
// 加载图标
_showLoading() {
// 不会主动关闭 需要调用hideLoading关闭提示框
wx.showLoading({
title: "数据正在加载中"
})
setTimeout(function () {
wx.hideLoading()
}, 2000)
},
// 模态对话框
_showModal() {
wx.showModal({
title: "提示",
content: "确定要删除吗",
confirmText: "狠心删除",
confirmColor: "red",
cancelText: "再想想",
cancelColor: "blue",
// showCancel:false,
editable: true,
success(res) {
console.log(res);
if (res.confirm) {
console.log('执行删除');
} else {
console.log('取消删除');
}
}
})
},
// 消息提示框
_showToast() {
wx.showToast({
title: "成功",
icon: "none",
image: "/logos/1.png",
duration: 3000,
mask: true,
success() {
console.log('111');
}
})
},
3.3tabBar设置
代码案例：
// 隐藏tabbar
// wx.hideTabBar({
// animation:true
// })
// setTimeout(function () {
// wx.showTabBar({
// animation: true,
// })
// }, 2000)
// 右上角添加文本
wx.setTabBarBadge({
index:1,
text:'999+'
})
wx.removeTabBarBadge({
index:1
})
// 右上角红色圆点
wx.showTabBarRedDot({
index:0
})
wx.hideTabBarRedDot({
index:0
})
4.缓存
单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB
（1）设置缓存
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。
// s设置缓存
_set(){
wx.setStorageSync('id', 1100)
wx.setStorage({
key:"userInfo",
data:{name:"zhangsan"},
success(){
}
})
}
（2）获取缓存
获取当前storage的相关信息
_get(){
wx.getStorage({
key: 'id',
success(res){
console.log(res);
}
})
let user = wx.getStorageSync('userInfo')
console.log(user);
},
（3）删除缓存
从本地缓存中移除指定 key
_remove(){
wx.removeStorage({
key: 'id',
})
wx.removeStorageSync('userInfo')
},
（4）清空缓存
清理本地数据缓存
_clear(){
// wx.clearStorage({})
wx.clearStorageSync()
},
四、网络请求
wx.request()
默认是有返回值，自己封装
请求的接口需要在后台配置
发起https请求、
本地开发
详情-本地设置-勾选上不校验和法域名
_search(e){
let that = this
let keyword = e.detail.value;
console.log(keyword);
// 发起请求
// wx.request({
// url: 'https://route.showapi.com/1196-2',
// method:'GET',
// data:{
// showapi_appid:"380443",
// showapi_sign:"6a70e319ad4148ad9f30efc493d39676",
// keyword:keyword
// },
// header:{
// "content-type":"application/json"
// },
// timeout:60000,
// success(res){
// console.log(res);
// that.setData({
// chengyu:res.data.showapi_res_body.data
// })
// }
// })
wx.request({
url: 'https://route.showapi.com/1196-2',
method:'post',
data:{
showapi_appid:"380443",
showapi_sign:"6a70e319ad4148ad9f30efc493d39676",
keyword:keyword
},
header:{
"content-type":"application/x-www-form-urlencoded"
},
timeout:60000,
success(res){
console.log(res);
that.setData({
chengyu:res.data.showapi_res_body.data
})
}
})
}
网络请求 封装
1.新建config.js
const url = "https://route.showapi.com"
export default{
url
}
2.新建http.js
import config from "./config"
// 封装网络请求的方法
let http = (options) => {
/*
url
method
data
header
timeout
*/
return new Promise((resolve, reject) => {
wx.request({
url: config.url + options.url,
method: options.method || 'GET',
data: options.data || {},
header:options.header || {
"content-type": "application/json"
},
timeout:options.timeout || 60000,
success(res) {
resolve(res)
},
fail(err){
reject(err)
}
})
})
}
export default http
3.页面请求数据
import http from '../../utils/http'
search(){
// 页面使用封装网络请发
let options = {
url: "/1196-2",
data: {
showapi_appid: "380443",
showapi_sign: "6a70e319ad4148ad9f30efc493d39676",
keyword: keyword
}
}
http(options).then(res=>{
console.log(res);
this.setData({
chengyu:res.data.showapi_res_body.data
})
})
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
