微信小程序开发流程与基本配置
1.小程序目录结构
图片目录（images）、页面目录（pages）、公共组件（components）、公共JavaScript（utils）、全局配置（app.json、project.config.json）等部分构成。
页面目录（pages）中，每个页面配置完成会自动生成4个文件（JS、JSON、WXSS、WXML），分别为页面逻辑（index.js）、页面配置（index.json）、页面样式（index.wxss）、页面结构模板（index.wxml）。
titls/index.js工具（格式时间） .eslintrc.js js语法检查
app.js根业务逻辑 app.json根配置
app.wxss全局css project.config.json项目配置
project.private.config.json私有配置
sitemap.json站点地图（微信搜索是否能够搜索你的小程序的页面）
所有的页面都需要在app.json中的config.pages中进行配置注册。
app.json小程序配置
pages 页面
--pages/main/main 主页
window窗口配置
---backgroundTextStyle 背景文字颜色
---nBBackgroundColor 导航栏背景色
----nBTitleText 导航栏文字
---nBTextStyle 导航栏文字颜色black white
tabBar 底部栏
---color 文字颜色
---selectedColor 选中文字颜色
---list 页面配置
-----pagePath 页面地址
-----iconPath 图标地址
---selsectedIconPath选中图表
----text文本
pages.jsonpages:[存储页面]
window:{窗口与导航栏信息}
tabBar:底部栏
完整的配置 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
2.小程序模板语法
文本渲染
{{}}
- wx:if="{{条件}}"
- wx:elif="{{条件}}"
- wx:else
遍历
{{item}} 自定义渲染
{{myitem}} 导入
include 复制拷贝(排除template内容)
import 只导入模板
- 定义模板
item.wxml
{{title}} --{{score}}
2.导入模板
3.使用模板
常用的组件(标签)
- view 容器 块状
- text 文本 行内
- image 图片
- input 表单
一个页面的组成
.wxml 模板 .wxss 层叠样式表 .js 业务逻辑 .json 页面配置
css
app.wxss 全局的样式 页面.wxss 只对页面有用
750rpx == 一屏的宽度
小程序事件
事件
- 绑定事件
bindtap="自定义函数" bindConfirm="确认" bindInput="表单发生变化"
- 事件的参数传递
2.自定义函数获取事件的参数
function say(e){// e.detail.value 表单的值// e.target.dataset.item// e.target.dataset.msg
}更新视图数据
-
定义数据 data:{msg:"xx",list:[x,y]}
-
在自定义函数中获取数据 this.data.msg this.data.list
-
更新数据(更新视图) this.setData({msg,list})
表单的双向绑定
内置api方法
wx.showToast({title,icon}) wx.stopPullDownRefresh() wx.pageScrollTo({scrollTop,duration}) wx.request
wx.request({url,method:"GET|POST|PUT|DELETE",data:请求的参数sucess(res){请求成功回调函数}fail(err){请求失败回调函数}complete(){无论成功失败都执行的完成}header:{请求头}
})
onPullDownRefresh(){}
onReachBottom(){}
onShareTimeline(){}分享朋友圈
onShareAppMessage 分享朋友
onPageScroll(){} 监听页面滚动页面方法
下拉刷新
页面.json "enablePullDownRefresh":true, "backgroundTextStyle": "dark",
监听下拉,执行请求 onPullDownRefresh(){ this.getList() }
在complete 停止下拉 wx.stopPullDownRefresh()
触底更新
监听触底 onReachBottom(){ this.getList(2) }
小程生命周期 app.js
onLaunch(){} 启动 onShow(){} 前台显示 onHide(){} 后台允许
页面生命周期
onLoad(){} 加载 onReady(){}渲染完毕 onShow(){} 页面显示 onHide(){} 页面隐藏 onUnload(){} 页面卸载
页面跳转
- js跳转
- 组件(标签跳转)
使用第第三方组件weapp
Vant Weapp - 轻量、可靠的小程序 UI 组件库
- cd 进入项目目录
- npm init -y (初始化项目)
- npm i @vant/weapp -S --production
- 工具->构建npm
- app.json 引入组件
"usingComponents": {"van-button": "@vant/weapp/button/index"},
在页面中使用插件
默认按钮
主要按钮 页面中的富文本处理(wxParse)
页面跳转navigator
- url 跳转的页面
- open-type 打开方式
- navigate 跳转
- redirect 重定向(当前页面不留记录)
- navigateBack 返回
- relaunch 重启跳转
- switchTab 跳转到底部栏页面
- exit 退出
小程序页面栈
小程序默认会缓存5个页面栈, navigate 增加一个页面栈 redirect 会替换条一个栈 navigateBack会移除一个页面栈 A->B->C->D->E
如果在当前页面执行navigateBack会触发卸载 执行redirect 也会触发当前页面的卸载
页面生命周期
onLoad 页面加载(页面参数也可以获取options) onReady 页面渲染完毕 onShow 页面显示 onHide 页面隐藏 onUnload 页面卸载(从缓存的页面栈移除)
全局数据的传递
//app.js globalData 中定义数据
globalData: {userInfo: null,// 定义全局数据countcount:5,}
//页面中取获取app的实例
const app = getApp();
//在onShow中获取globalData
this.setData({num:app.globalData.count})
//更新globalData
app.galbalData.count++;
this.setData({num:app.globalData.count})本地存储
wx.setStorageSync(key,value) wx.getStorageSync(key)常用组件(标准)看文档
开发能力
- 登录
- wx.login({}) 获取code
- code发给后端实现登录逻辑(后端拿到openid)
- 把用户信息也发送给后端
- 获取用户头像
// 必须是点击事件触发
wx.getUserProfile({success(res){res.userInfo}
})- 支付
0 微信支付平台要开通(商家才可) 1 获取采用wx.login() 获取code 2. 通过code获取用户的openid,把openid和订单信息(商品,价格..)发给后端 3. 后端返回支付信息,wx.requestPayment({支付信息}) 发起支付
- 获取电话号码
必须是按钮 open-type="getPhoneNumber" bindgetphoneNumber="getPhoneNumber" 获取code,发送给后端换取真正的 手机号码
openid,电话号,支付信息:后端都是 appid+appSecret+code向微信服务器换取
常用组件
容器组件
- view
- swiper
- swiper-item
- scroll-view 基础内容
- text
- rigch-text 表单组件
- button
- input
- picker
- switch
- textarea 导航
- navigator 媒体
- image
- map
- canvas
- web-view 本质上是一个内置浏览器
app的种类
- hibrd 混合开发(有原生有网页,网页内容通过web-view嵌入)
- 原生开发(采用android,swift)开发
- webapp(就是网页)
- 网页加个(app的壳)
常用api(api)
设备信息 联网信息 图片上传与下载相册
自定义组件
小程序的组件
Component({externalClasses:["外部类"],options:选项:样式隔离,开启多个插槽,properties:父组件的传参(只读)lifetimes:生命周期:attached挂载,detached卸载pageLifetimes:页面什么周期:show,hidedata:组件的数据(可写),methods:组件的方法
})父传子
//父传递
// 子接收properties:{value:{type:Number,value:1}}// 子访问this.data.value{{value}} 子传父
// 子发送事件
this.triggerEvent("change",num)
// 父监听change
插槽
- 默认插槽
// 定义插槽
插槽内容 - 多个插槽
// 子组件定义开启多个插槽
options:{multipleSlots:true}
// 父组件定义插槽
pre next
外部类
组件外部定义组件内的样式
- 1定义外部类数组
externalClasses: ['btnclass'],- 2.组件的wxml里面使用外部类
- 3在父组件定义外部类对应的class
- 在组件的样式定义样式
.btn{width: 150rpx !important;height: 150rpx !important;
}组件的生命周期
lifetimes:{attached(){console.log("组件挂载完毕");},detached(){console.log("组件卸载")}},组件中页面的生命周期
pageLifetimes:{show(){console.log("页面显示")},hide(){console.log("页面隐藏")}},组件中监听数据的变化(可以同时监听多个)
observers:{"value":function(v){console.log(v,"value发生变化");}},搭建小程序的项目框架(使用分包)
- 分包
- 分包预加载
- 封装request.js
自定义导航栏
// 状态栏的高度
const {statusBarHeight,windowWidth} = wx.getSystemInfoSync();
// 获取胶囊的区域
const rect = wx.getMenuButtonBoundingClientRect();
// 定义导航栏的高度
const navHeight = (rect.top-statusBarHeight)*2+rect.height+2;
// 胶囊宽度
const btnsWidth = (windowWidth-rect.right)*2+rect.width;
获取页面栈
const routes= getCurrentPages(); routes[0].route==="/pages/home/home"
wxs 语法
对数据进行格式化,在wxml里面使用js特定方法,像vue2中的filters
定义
function number(value,len=0){return value.toFixed(len);
}
function date(str,arg1="/",arg2=":"){var d = getDate(str);var Y = d.getFullYear();var M = d.getMonth()+1; var D = d.getDate();var hh = d.getHours();var mm = d.getMinutes();var ss = d.getSeconds();return [Y,M,D].join(arg1)+" "+[hh,mm,ss].join(arg2)
}
module.exports={number:number,date:date}
使用{{3.1415926}}
{{format.number(3.1415926,2)}}
{{format.date("Mon Jul 17 2023 14:14:14 GMT+0800 (中国标准时间)")}} 选择器
- 选择组件,得到组件的实例(js对象)
// vue的ref
const con = this.selectComponent(".my-component");
console.log(con);- 下载节点 // 必须要在页面准备完毕后再执行 onReady
// 创建选择器
const query = wx.createSelectorQuery();// 获取date的边界
// query.select("#date").boundingClientRect();
query.selectAll(".n1").boundingClientRect();
// 获取窗口信息
query.selectViewport().scrollOffset()
// 执行获取
query.exec(function(res){console.log(res);
})
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！