面试雷区：
toast 有Icon的时候最多只能显示7个字 想换行显示Icon设置为'none'
小程序在onload（ === created）生命周期当中来获取跳转的时候传递的参数
小程序页面栈最多10层
app.json 全局配置项：
pages 里面哪个第一个，哪个就是首页
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/list/list",
"pages/uc/uc",
"pages/setting/setting",
"pages/test/test"
],
tabBar: 底部导航栏 list里面第一个必须是首页 ；里面的list最多能配置（2-5个底部导航） ；iconPath：底部导航图片不支持网络图片（只支持本地图片）目的：确保用户进来就能看到； 小程序tab页面之间是不能使用wx.navigateTo()跳转的会报错 只能通过wx.switchTab()
"tabBar": {
"color": "#ccc",
"backgroundColor":"#e5ffe5",
"selectedColor":"#000",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "./assets/imgs/_水果.png",
"selectedIconPath": "./assets/imgs/_水果 (1).png"
},
{
"text": "用户最新",
"pagePath": "pages/uc/uc",
"iconPath": "./assets/imgs/木瓜.png",
"selectedIconPath": "./assets/imgs/木瓜 (1).png"
},
{
"text": "配直",
"pagePath": "pages/setting/setting",
"iconPath": "./assets/imgs/葡萄.png",
"selectedIconPath": "./assets/imgs/葡萄 (1).png"
}
]
},
小程序的重定向 对首页进行限制 无论怎么重定向还是能回到首页 其他页面可以实现正常重定向功能
自定义顶部通栏样式
- 取消自带顶部通栏
/setting.json
{
"usingComponents": {},
"enablePullDownRefresh": true, //支持下拉刷新
"navigationStyle": "custom" //支持自定义顶部通栏
}
- 通过API获取相应高度再进行计算
/setting.js
onShow() {
this.getHeight()
},
async getHeight() {
// statusBarHeight 状态栏高度
const { statusBarHeight } = await wx.getSystemInfo()
console.log('statusBarHeight', statusBarHeight);
//得到胶囊高度+胶囊距离顶部距离
const { height, top } = await wx.getMenuButtonBoundingClientRect();
console.log('胶囊高度 距离顶部高度', height, top);
// 间隔高度 = 距离顶部高度 - 状态栏高度
const intervalHeight = top - statusBarHeight
//顶部通栏高度 = 胶囊距离顶部高度 + 胶囊高度
const finallyHeight = top + intervalHeight + height
console.log('finallyHeight', finallyHeight);
this.setData({
finallyH: finallyHeight,
pd: statusBarHeight,
lh: height + 2 * intervalHeight
})
},
/setting.wxss
.top{
box-sizing: border-box;
text-align: center;
background-color: red;
box-shadow: 2px 3px 3px rgba(0, 0, 0, .3);
}
/setting.wxml
<view class="top" style="height: {{finallyH}}px; padding-top: {{pd}}px; line-height: {{lh}}px;">顶部通栏</view>
轻提示代码封装
developers.weixin.qq.com/miniprogram…
const toast = (title, icon = 'none') => {
wx.showToast({
title,
icon,
})
}
myToast(){
toast('我是请提示，后面放假，姐姐啊哈哈哈哈哈哈','success')
},
网络请求的进阶
- 青铜局
getList() {
//传统写法
//const that = this
wx.request({
url: 'https://cnodejs.org/api/v1/topics',
method: 'GET',
//使用箭头函数 访问外界的this
success: (res) => {
console.log(res);
this.setData({
dataList: res.data.data
})
}
})
},
- 钻石局（一层封装）
const baseUrl = 'https://cnodejs.org/api/v1'
const request = function (url, method, data) {
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + url,
method,
data,
success(res) {
resolve(res)
},
fail(err) {
reject(err)
}
})
})
}
module.exports = {
request
}
const { request } = require('../../api/index')
async getList1() {
const res = await request('https://cnodejs.org/api/v1/topics','GET')
console.log(res);
this.setData({
dataList: res.data.data
})
},
- 星耀局（两层封装）
const baseUrl = 'https://cnodejs.org/api/v1'
const request = function (url, method, data) {
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + url,
method,
data,
success(res) {
resolve(res)
},
fail(err) {
reject(err)
}
})
})
}
const $api = {
get(url, data) {
return request(url, 'GET', data)
},
post(url, data) {
return request(url, 'POST', data)
},
...
}
module.exports = {
$api
}
const { $api } = require('../../api/index')
async getList1() {
const res = await $api.get('topics')
console.log('res', res);
this.setData({
dataList: res.data.data
})
},
- 王者局（三层封装）
const baseUrl = 'https://cnodejs.org/api/v1'
const request = function (url, method, data) {
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + url,
method,
data,
success(res) {
resolve(res)
},
fail(err) {
reject(err)
}
})
})
}
const $api = {
get(url, data) {
return request(url, 'GET', data)
},
post(url, data) {
return request(url, 'POST', data)
},
...
}
module.exports = {
$api
}
const { $api } = require('./index')
const getList = () => {
return $api.get('topics');
}
module.exports = {
getList
}
const { getList } = require('../../api/newIndex')
async getList1() {
const res = await getList()
console.log('res', res);
this.setData({
dataList: res.data.data
})
},
激励广告
page({
onLoad() {
if (wx.createRewardedVideoAd) {
//wx.createRewardedVideoAd 返回值是：RewardedVideoAd 激励广告
rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'xxxx' })
//监听激励视频广告加载事件
rewardedVideoAd.onLoad(() => {
console.log('onLoad event emit')
})
//监听激励视频错误事件。
rewardedVideoAd.onError((err) => {
console.log('onError event emit', err)
})
//监听用户点击 关闭广告 按钮的事件。
rewardedVideoAd.onClose((res) => {
console.log('onClose event emit', res)
//isEnded 视频是否是在用户完整观看的情况下被关闭的
const { isEnded } = res
//视频是否播放结束、可以向用户下发奖励
if (isEnded) {
//@todo 获得积分数据交互
console.log('奖励用户');
}
})
}
},
showVideoAd() {
// 用户触发广告后，显示激励视频广告
if (rewardedVideoAd) {
rewardedVideoAd.show().catch(() => {
// 失败重试
//加载激励视频广告
rewardedVideoAd.load()
//显示激励视频广告。激励视频广告将从屏幕下方推入
.then(() => rewardedVideoAd.show())
.catch(err => {
console.log('激励视频 广告显示失败')
})
})
}
},
})
小程序配置项
/全局配置项
/app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/list/list",
"pages/uc/uc",
"pages/setting/setting",
"pages/test/test"
], //路由配置 新建页面时，检查是否会自动生成
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ff6700",
"navigationBarTitleText": "KFC",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#ccc",
"backgroundColor":"#e5ffe5",
"selectedColor":"#000",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "./assets/imgs/_水果.png",
"selectedIconPath": "./assets/imgs/_水果 (1).png"
},
{
"text": "用户最新",
"pagePath": "pages/uc/uc",
"iconPath": "./assets/imgs/木瓜.png",
"selectedIconPath": "./assets/imgs/木瓜 (1).png"
},
{
"text": "配直",
"pagePath": "pages/setting/setting",
"iconPath": "./assets/imgs/葡萄.png",
"selectedIconPath": "./assets/imgs/葡萄 (1).png"
}
]
}, //底部导航栏配置
"style": "v2",
"sitemapLocation": "sitemap.json"
}
/页面配置项
/setting.json
{
"usingComponents": {},
"navigationBarTitleText": "哈哈哈",
"enablePullDownRefresh": true, //开启下拉刷新
"navigationStyle": "custom", //自定义顶部通栏
}
基本生命周期
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
// === created()
//小程序在onload生命周期当中来获取跳转的时候传递的参数
onLoad(options) {
console.log('options',options);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
地图组件
developers.weixin.qq.com/miniprogram…
<map style="width: 100%; height:300px" markers="{{mas}}" latitude="{{23.21911}}" longitude="{{113.305801}}" polyline="{{pline}}" scale="15"></map>
data:{
mas: [{ latitude: 23.21911, longitude: 113.305801 }, { latitude: 23.220297, longitude: 113.306349 }, { latitude: 23.222387, longitude: 113.298223 }, { latitude: 23.216476, longitude: 113.293526 }, { latitude: 23.213774, longitude: 113.304951 },],
pline: [{ points: [{ latitude: 23.220297, longitude: 113.306349 }, { latitude: 23.222387, longitude: 113.298223 }, { latitude: 23.216476, longitude: 113.293526 }, { latitude: 23.213774, longitude: 113.304951 }, { latitude: 23.220297, longitude: 113.306349 },], color: '#ff6700', width: 5 },],
},
}
携带参数-通过jquery的方式来实现 /path?key=value&key=value
获取参数-小程序在onload生命周期当中来获取跳转的时候传递的参数-查看是在左下角
小程序大小限制 轻易不引用第三方插件 小程序代码不能超过20M 单个分包不超过2M
服务号：网页版本 H5页面（最早的版本 支持支付能力，在小程序出现之前）一个月群发发送四次
订阅号：不具备支付能力 文章 每天可群发一次 一次发十条 订阅消息，发送推文
小程序：网页支持硬件少 小程序在手机跑支持硬件多
开发流程：
新建；
项目名称：XXX；
(源码放置)目录：XXX；
APPID：点击测试号(练手) 可修改；
后端服务：暂时不使用云开发（以后趋势云开发）；
模板选择：暂时JS；
模拟器：提供真实的模拟效果；
编辑器：提供原生VSC编辑界面 可以使用我们自己的VSC；
调试器：F12；
***目录结构***：
pages:存放页面；（可改）
utils:工具 方便我们定义方法 模块导入 模块导出；（可改）
app.js 整个小程序入口 不可改 作用：就是调用APP()
app.json 告诉整个小程序 有哪几个页面 也就是路由表(配置文件路径)
app.wxss 样式文件 全局样式文件 (CSS内容)
project.config.json: 编辑器相关的配置文件 针对项目配置 基本不需要改动
剩余两个 轮不到我们更改
/index
.js 逻辑 === <script>
.json 配置部分 === Vue2的配置API
.wxml 模板 === <template>
.wxss 样式 === <style>
****配置语法 === 类似Vue2语法
除了 状态 要声明在 data ,其余随便
Page({}) 传入一个对象 这个对象就是配置API
{
data:{
a: 'XXX',
b:true,
c:'kfc',
d:[
{id:1},
{id:2},
]
}, //无需函数返回
fn1(e){
console.log('1122' , e) //e就是事件对象
},
}
****模板****
<view> {{ a }} </view>
指令 wx:if="{{ b }}"
<view wx:if="{{ b }}"> 是否渲染 </view>
class
<view class="{{ c }}"> 是否渲染 </view>
遍历 默认变量名 item 默认索引值 index
<view wx:for="{{d}}">{{index}} {{item.id}} </view>
改变变量名 改变索引值
<view wx:for="{{d}}" wx:for-item="kkk" wx:for-index="idx">{{idx}} {{kkk.id}} </view>
事件的绑定 （小程序就是移动端，不可能是点击）bindtap:触碰 就只能等于函数名
<button bindtap="fn1">我是小程序艾纽<button>
****调试方式****
预览：右上角三个点 开发模式 开始调试
真机调试：会有一个调试界面
****功能****
扫一扫
地图
获取设备信息
生物认证(指纹，人脸)
蓝牙低功耗(快递员开单)
NFC(触碰开门)
电量
获取网络状态(提示用户网络状态 提示用户网络状态)
电话(传一个手机号码)
罗盘指向
设备方向
震动
广告：
激励广告(看多少秒 就有奖励 ) load() show() 看完会有回调 小游戏赚钱方式看够时间就赚钱
插屏广告 非强制用户看
