mini小程序入坑说明
微信公众平台
微信小程序开发 - 安装微信开发工具
支付宝小程序开发 - 支付宝安装开发工具
百度小程序开发 - 百度开发工具
…
小程序注册页面
weixin991218@
[email protected] 微信绑定
开发者ID - 小程序 - 开发-开发管理 - 开发设置
代码上传 - 小程序 - 管理-版本管理-查看提交的信息
小程序介绍：
当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 【微信打开html网页】
微信小程序，2016年末推出，2017年初第一批小程序正式上线
SDK software-Development-Kit 软件开发工具包
小程序与普通网页开发的区别
小程序的主要开发语言是 JavaScript
- 网页开发渲染线程和脚本线程是互斥的， 而在小程序中，二者是分开的分别运行在不同的线程中。
- 网页开发可使用DOM API，小程序开发缺少相关的DOM API和BOM API
- 网页开发主要考虑浏览器兼容，小程序开发主要考虑的是安卓与iOS两大操作系统
第一个小程序
？问你开发工具 ： 微信开发者工具
打开微信开发者工具 - 微信扫一下 - 注册的账号登录 - 项目名字 - 项目目录 - AppleID - 不使用云服务 - js | ts - 基础模板 -
下载微信开发者工具 并安装，使用微信扫码登录工具，创建小程序项目。
创建小程序应用时，选择填写自己的 AppID，先不使用云开发，选择最基础的模板即可。
可先认识一下开发者工具的界面结构
四类文件
每个文件夹下的四类文件名称需要一致
.json后缀的JSON配置文件.wxml后缀的WXML模板文件.wxss后缀的WXSS样式文件.js后缀的JS脚本逻辑文件
JSON配置
程序中，后缀名为 *.json 的文件是静态配置文件
app.json
小程序的全局配置文件
- pages字段：是小程序中所有页面路径（routes）配置，是数组结构。默认情况下，将数组的第一个元素表示的路径作为小程序应用的”首页“
默认将pages数组中第一项作为小程序首页，否则可设置 entryPagePath
- window字段：小程序应用窗口的全局配置。 所有页面的顶部背景颜色，文字颜色定义等
enablePullDownRefresh:true, // 每个页面都允许下拉刷新功能
小程序最大为20M,每个分包2M
-
tabbar字段：| 自定义
2-5项tab，初始图标，选中激活图标，颜色
图表大小推荐 81*81
sitemap.json
配置是否允许微信对小程序页面进行索引
页面局部设置：navigationBarTitleText:‘页面标题’
WXML
充当的是 HTML 文件
WXML 中标签于 HTML 标签名字不一样,在标签中可使用类似 wx:if 的属性，{{ }} 插值的语法，
WXSS
充当的是css文件
书写同css规则，新增了 rpx 单位（响应式的单位）,避免的换算困难（rem换算）。app.wxss文件中，提供了全局样式文件的处理
可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像
JS文件
主要负责交互逻辑
app.js
app.js 文件负责的是注册小程序应用
调用 App() 函数来注册小程序应用：
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
},
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
onLaunch()、onShow()、onHide() 是小程序应用的生命周期钩子函数
页面 js
注册页面，调用 Page() 函数来注册页面：
Page({
/**
* 页面的初始数据，类似于 react class 组件中的 state。
* 要修改 data 中的数据，调用 setData() 方法来修改
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
taotao-原生小程序开发
小程序开发工具坑很多-慢慢尝试-重开
- 构建页面结构：首页/购物车/分类/登录…
- app.json 配置 pages字段 、 window全局窗口配置、tabbat/list属性配置、
- /images/tab-bar-icon/imgs.png存放图标渲染
navigationStyle:custom //自定义导航条样式
onReachBottomDistance:number //上拉处理距离底部高度
subpackage:object[] //分包
perimission:object //权限获取
- 布局-wxml文件
view标签 =》 div 视图容器
swiper滑块视图容器 swiper-item轮播每一项
scroll-view滚动视图
分类滚动视图
- 列表渲染：绑定 key 提高性能
- 换行解决 white-space
- 发网络请求
index.js
data:{
//初始数据
cat:[
{}
]
}
index.wxss
-写样式代码
网络请求
API: wx.request( object )
wx.request({
url:'',
success:res=>{
//数据处理-状态为200，处理返回数据
if(res.statusCode===200){
const { code,data } = res.data
if(code ===200 ){
//调用setData修改数据
this.setData(
cat:data.list
)
}
}
},
fail:err=>{},
})
-
小程序跨域-详情-本地设置-不校验本地合法域名勾选
-
项目上线后，只能发https请求
-
多次请求繁琐，实现 axios 封装
-
wx.request 不支持promise写法
utils/request.js 二次封装
commonJS的规范 – module.exports导出 require()
/**
* wx.request() 方法的二次封装处理
*/
const baseURL = 'http://quanzhan.site:3000'
const request = ({url, data, header = {}, method = 'GET'} = {}) => {
// 新 new Promise() 创建的 Promise 对象的状态是 pending 待定状态
return new Promise((resolve, reject) => {
wx.request({
url: baseURL + url, // 在访问接口前拼接统一的 baseURL
data, // 请求发送给后端的数据
header: { // 请求头
...header,
'X-Token': 'token string.............', // 携带 token 认证字段
},
timeout: 5000, // 请求超时时间
method, // 请求方法，默认为 GET
success: res => { // 请求成功的回调函数
if (res.statusCode === 200) { // HTTP状态码为 200 表示 OK
// res.data 中保存的是后端向前端返回的数据
// 通常后端与前端交互时有统一的规范，比如返回一个对象，有 code 与 data、message 属性。
// 当前接口规范中，code 为 200 表示后端向前端返回成功的数据。
// 返回的数据在 data 属性中。
const {code, data} = res.data
if (code === 200) {
resolve(data) // 将 Promise 的状态修改为 fulfilled 成功状态，并携带成功的数据
return
}
}
// 如果 HTTP 状态码或后端返回的 code 表示有误时，将
// Promise 状态修改为 rejected 失败状态，携带失败原因。
const error = new Error('接口访问有误')
reject(error)
},
fail: err => { // 请求失败
// 将 Promise 状态标记为失败状态
reject(err)
},
})
})
}
// 利用 CommonJS 规范中的 module.exports 导出当前文件中定义的 request 方法
module.exports = request
轮播图swiper
------------------------------------------------
-
block标签类似<>
block` 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
-
image标签默认宽高 320*240
商品列表触底继续加载
onReachBottom(()=>{log})
onReachBotteomDistance:200
发送网络请求：
if(this.data.isEnd){
console.log('到底了');
return
}
console.log('...');
//触底发送网络请求
let data = await request({
url:'/api/tab/1/feeds?start=' + this.data.nextIndex
})
console.log('触底：',data);
this.setData({
//!this.date.list
productList:this.data.productList.concat(data.list),
isEnd:data.isEnd,
nextIndex:data.nextIndex,
})
if vs hidden
wx:ifvshidden因为
wx:if之中的模板也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时
wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。相比之下，
hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。一般来说，
wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好
加载中...
我是有底线的！！
点击商品详情跳转-
navigator组件
<navigator to="/....">
// 跳转到其他小程序 - 需要app-id配置
// 跳转到当前小程序其他页面
//图像绑定点击事件 300ms之内为短按 tap 长按longpress
bindtap = "handleBing"
data-id = "{{ item.id }}" !!
js文件中:添加属性 js逻辑使用 ---
handleBing:(event)=>{
//event.target.dataset => data-自定义的数据获取
//编程式导航跳转 -API路由
//=》什么是tabbar页面 - 不能跳到tabbar页面 - tabbar绑定的页面
wx.navigatorTo({
url:'/...?id=' + event.target.dataset.id
})
}
-
拿参=》页面跳转传参加载时，在新页面的onLoad 函数中拿到 query 参数
-
传参=》？查询字符串，navigation的 url属性 ？ 拼接传参
-
data- 自定义的属性前缀 通过event.target.dataset
传参：
<text bindtap="handleDetail" data-id="{{item.id}}">{{item.title}}</text>
// 点击跳转函数
handleDetail:(event)=>{
console.log('.....',event.target);
wx.navigateTo({
url:'/pages/details/index?id=' + event.target.dataset.id
})
}
获取参数：新页面的onLoad参数：
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (query) {
console.log('details:id',query);
},
基础组件
编写 wxml 结构时，使用到的基本标签
- view
- scroll-view
- swiper 、 swiper-item
- image
- text
- navigator 类似 a
- block 分组
API
- wx.request()
- wx.navigatorTo() 跳转非 tabbar 页面 【编程式 ？传参】
- …
wxml
和 vue 模板语法类似
绑定数据 {{ expression }}
绑定事件
bindtap 【冒泡】catchtap 【阻止当前事件冒泡】、
bindtap
capture-bind 【传播】capture-catch 【阻止传播】
跳转到tabbar页面
{{item.name}}
导航跳转到分类页面 - 即tabbar跳转 API switchTab 【不能带参数】
组件属性跳转 :
wx.switchTab({
url:'/pages/details/index'
})
-------
<navigator open-type = 'switchTab'> <navigator>
存storage:
// 导航跳转tabbar页面
handleCategory:(event)=>{
// 点击哪个分类传递对应分类id,查询数据
wx.setStorageSync('cid', event.target.dataset.id)
wx.switchTab({
url: '/pages/category/index',
})
}
取storage
/**
* 生命周期函数--监听页面显示onShow
*/
onShow: function () {
let data = wx.getStorageSync('cid')
console.log('cid',data);
},
跳到分类页面的时候传 当前分类id 查询子分类
1-- 本地存储 实现传参 wx.setStorageSync-同步 Async-异步
同步结果直接返回 - 存储数据类型不限 【js中local存string】
2-- 全局globalData传递数据
组件内部共享数据
app.js
//自定义全局共享数据
globalData:{
cid:0,
}
页面存取
//得到整个app对象
const app = getApp()
//存取
app.globalData.cid = event.target.dataset.id
//读取
const cid = app.globalData.cid
-
wx.reLaunch 重新启动
-
wx.redirectTo() 重定向
小程序登录
》wx.login获得临时登录凭证 - wx.request()发送code - 后端发给微信接口服务认证 - 返回信 息 - 自定义登录存入storage - request() 发送携带登录状态 -响应数据 getUserInfo()
》配合后端一起 -
<button bindtap="handleLogin">点击</button>
----------------
//登录
handleLogin(){
wx.getUserProfile({
desc: '描述用户信息',
success(data){
console.log("success",data);
},
fail(erro){
console.log(erro);
}
})
}
---------------------
wx.getUserProfile({ //弹出授权框框
desc:'描述使用用户信息'
success:res=>{}, //res.userInfo 拿到头像和昵称
fail:err=>{}
})
picker选择器
camera相机 - 拍照功能 API - wx.createCamerCOntext
拍照的图片为：
//拍照
takephoto(){
//创建相机上下文对象
const cameraContext = wx.createCameraContext()
//调用拍照方法
cameraContext.takePhoto({
success:(data)=>{
console.log('拍照成功',data);
this.setData({
//保存拍照图片地址
tempImagePath:data.tempImagePath,
})
},
fail:(error)=>{
console.log('拍照失败',error);
}
})
//扫码
扫码成功触发handleScancode - 打印event对象 event.detail....
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0EAYE6dr-1669703560657)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1655983008492.png)]
-调用API 媒体 调出手机自身的相机
wx.chooseMedia() //可以录视频
wx.chooseImage()
wx.chooseMedia()
wx.scanCode({
...
})
---------------
handleCamera(){
let _this = this
//API实现上传视频
wx.chooseMedia({
success(data){
console.log('上传视频：',data);
_this.setData({
tempImagePath:data.tempFiles[0].tempFilePath
})
}
})
//API实现上传图片
wx.chooseImage({
count:2,
success(data){
console.log('成功回调：',data);
_this.setData({
tempImagePath:data.tempFilePaths
})
},
fail(data){
console.log('失败回调',data);
}
})
},
map组件
更新客户端微信版本
wx.updateWeChatApp({
//监视客户版本过低，小程序不支持，会自动跳转到更新微信页面
})
- showNavgationBarLoading()
- showActionSheet()
- wx.seetNavigationBarTitle() // 点击商品动态设置导航栏的标题
- wx.uploadFile() downloadFile()
- wx.stopwifi
- wx.addPhoneContact()
- wx.getNetworkType()
- wx.makePhoneCall() //打电话
- wx.uploadFile() wx.downloadFile()
组件自定义 【指南】
- 建立components目录/cart组件/js | wxml | wxss | json四类文件
- json文件自定义组件声明
{ //json文件是个对象
"component":true,// 自定义组件声明
}
- 自定义组件结构 | 样式 书写
- js 逻辑书写
//组件函数 =》自定义组件中的js是个组件函数
component({
properties:{
//只读 - 类型校验
item:{type:Object}
},
data:{
//内部数据
},
methods:{
},
})
- 使用组件
//哪个页面使用，就在它的json文件标注：
"usingComponents": {
"xiaolan-upup":"/components/backTop/index"
}
----------
{
"usingComponent":{
"自定义组件名字":"/文件路径"
}
}
全局定义组件-
App.json文件中做 useingComponent: 注册，可以所有页面都使用
通信：===Vue通信
骨架屏
页面的空白版本，在页面完全渲染前，通过灰色模块来勾勒模块，等数据加载完毕后，在替换成真实的内容。
工具自带生成骨架屏 右下角点点点 - wx-if === wx:if
- 小程序进入的首页多了index.skeleton.wxml wxss两个文件
- 使用的时候在index.wxml wxss 引入代码
如果loading为true,显示骨架屏；//需要自己添加loading数据
数据读取完毕且更改之后之后，将loading改为false
loading:true, //骨架屏显示与否
-------------------------------------
setTimeout( async()=>{
try {
let [cateData,homeData] =await Promise.allSettled([
request({ url:'/api/tabs'}),
request({ url:'/api/tab/1'})
])
// console.log('data:all',homeData,cateData);
this.setData({
categories:cateData.value.list,
banners:homeData.value.banners,
productList:homeData.value.items.list,
loading:false, //加载完数据后将骨架屏撤掉
})
} catch (error) {
console.error(error)
}
},5000)
小程序也可以使用组件库—=》
Vant Weapp 小程序
步骤一：通过 npm 安装
》需要先 读npm 支持
- 文件资源管理器 ： npm init -y =>创建package.json文件
- 根文件创建 miniprogram
- npm install
- npm i @vant/weapp -S --production
步骤二：按照流程修改配置
app.json 删除 style:v2
project.config.json添加配置
构建 npm 包
引入组件 app.json文件 ：注意路径！！！
"van-button": "/miniprogram/miniprogram_npm/@vant/weapp/button/index"
…正常使用
页面通信
- 通过 url ?
- 本地存储
- 页面app全局定义数据 globalData
遇到的奇葩问题：
- wxml代码避免换行，会识别源码格式
- wx:for=" {{ categories }}" 引号多打了空格，显示失败
小程序框架
》多个平台都能运行小程序，除了写多套小程序外，也可以使用框架
- mpvue 美团 vue2.x - 跨平台 18年没有维护
- wepy
- uni-app 基于mpvue…扩展 vuejs
- taro 京东 react重度使用者 支持react-vue
uniApp
》快速上手 Vue语法写法 + 小程序标签
工具HbuilderX
- 建立项目-uni-app
- 模板 hello-uni-app 演示组件使用的 Vue版本选择
- 运行时开发环境的任务 npm start
- 发行 npm run build -原生App-（独立生成安装包…）构建完成后当前目录文件下生成unpackage文件
HBuilder：运行到小程序模拟器-需要各自的开发者工具安装-运行设置-小程序运行配置-开发工具路径需要配置一下–
微信开发者工具：设置-安全设置-安全-服务端口 开启命令行和HTTP才可以调用该工具
uniapp小程序案例- Dcloud插件市场
模板下载参照 - 小程序一个月完成
简历不要直接写 电商管理系统
写 == 江苏无锡旅游
- uniapp小程序axios封装
- ES6 Moudles 导入导出
做原生开发还是uniapp开发 套路 页面的配置 全局配置 那个文件中要清楚
uni-grid 网格
uni-app不能直接使用vue-router
插件市场有vueRrouter-ui等封装
配置文件是 pages.json 如何封装的axios？
登录
uni-forms uni-forms-item uni-esatinput
VUEx VUErOUTER
!条件编译
编译器 - 条件编译
平台差异-编写ifelse性能低-条件编译
特殊的注释
<!-- #ifdef APP-PLUS -->
// #ifdef H5
------------在注释中写这些！！---------
原生APP 平台代码
#endif
#ifdef H5
浏览器中才有
#endif
#ifdef MP-WEIXIN
微信小程序中才有
#endif
微信的 wx.login方法获取用户信息，uni-app通过表单注册登录，如何根据不同平台进行差异编译
taro react语法+小程序标签
uniapp vue语法+小程序标签