小程序和普通网页开发的区别:
1 运行环境不同:网页在浏览器,小程序在微信环境
2 API不同:网页可以操作DOM BOM,小程序可以调用微信环境的地理位置 扫码和支付。
3 开发模式不同:浏览器+IDE, 小程序账号+小程序开发者工具+小程序项目
小程序UI组件示例:
注册小程序和查看AppID:
扫码: 使用太阳的logo。
查看AppId:
安装微信开发者工具:
创建第一个小程序:
编译和预览的区别:(一个是左侧的开发者工具查看,一个是微信扫码后查看)
小程序项目最新样式版本:
如何修改project.config.json:
小程序代码中的AppID存放的地方:
app.json
顶部title的颜色:
如何快速创建一个小程序页面:
使用保存即可!
小程序组件的分类:
1 视图组件(view 类似div,scroll-view滚动条,swiper轮播组件)
2 基础组件
3 表单组件
4 导航组件
5 媒体组件
如何在测试页面的阶段让某个页面放在头一个展示?
使用view写一个一行三个的布局:
wxml代码:
<!--pages/list/list.wxml--> <view class="container1"> <view>A</view> <view>B</view> <view>C</view> </view>
wxss代码:
/* pages/list/list.wxss */ .container1 view{ width:100px; height: 100px; text-align: center; line-height: 100px; } .container1 view:nth-child(1){ background-color: red; } .container1 view:nth-child(2){ background-color:blue; } .container1 view:nth-child(3){ background-color: green; } .container1{ display: flex; justify-content: space-around; }
代码解析:
1 这里的container1是自定义的类,注意不要是container,因为这个类有系统自带样式。
2 如果要一行三个,就设置 display:flex.
小程序API 的三大类:
1 事件监听API:
以on开头,比如 wx.onWindowResize
2 同步API:
以Sync结尾, wx.setStorageSync
3 异步API
类似ajax。wx.request()发起网络请求。
小程序中的插值语法:
图片宽度自适应:
<image src="{{****}}" mode="widthFix"></image>
新增一个子pages模块错误,之后删除,却页面显示仍停留在老的页面中该如何处理?
删除后进入一个正常的页面,之后再恢复新的页面。
小程序事件:
tag: bindtap,类似于click的点击事件
input: 输入框事件
change: 改变事件
如何理解回调函数?
回调函数有:type,timestamp,target,currentTarget,detail,touches.....
代码:
页面展示:
以下console中的e就是回调函数:
使用 this.setData(dataObject) 给data数据赋值:
{{count}} <button type='primary' bindtap="dianji">点击</button>
dianji(e){ this.setData({ count:this.data.count+1 }) },
导航栏蓝底白字加文字:
"window": { "navigationBarBackgroundColor": "#0000FF", "navigationBarTextStyle": "white", "navigationBarTitleText": "hello" },
rpx 尺寸单位:
rpx 是微信小程序独有的,用来解决屏适配的尺寸单位。
如何在真机中的下拉刷新?(真机中下拉菜单后如何处理无法合上刷新按钮的页面)
Page({ data: { items: [] }, onLoad: function() { // 页面加载时初始化数据 console.log("Page loaded"); this.loadData(); }, onPullDownRefresh: function() { // 用户下拉刷新时触发 console.log("111"); this.loadData(true); }, loadData: function(isRefresh = false) { // 模拟请求数据 setTimeout(() => { const newItems = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' } ]; this.setData({ items: newItems }); if (isRefresh) { // 停止下拉刷新 wx.stopPullDownRefresh(); } }, 1000); // 模拟请求时间 } });
注意:默认json中已经出现了onPullDownRefresh,注意不要重复的写onPullDownRefresh
上拉触底的事件:
onReachBottom() {
},
小程序tabbar: (最多五个!)
小程序中网络数据请求的限制:
1 只能请求HTTPS类型的接口
2 必须将接口的域名添加到信任列表中。
不校验合法域名:
备注:在开发和调试的阶段可以使用http ,但是上线和部署的时候仍然要使用https
小程序有Ajax吗?
ajax存在于浏览器中,微信的宿主是微信,所以不称呼“发起ajax请求”,而是称呼“发起网络请求”
声明式导航
声明式导航通常指的是通过配置文件(如
app.json
)进行的静态导航设置。这种方式主要用于配置小程序的全局导航栏(tabBar
)和页面路由。"pagePath": "pages/index/index",
编程式导航:
<view class="container"> <text>{{message}}</text> <button bindtap="navigateToLogs">前往日志页面</button> </view>
Page({ data: { message: "欢迎来到首页" }, navigateToLogs: function() { wx.navigateTo({ url: '/pages/logs/logs' }); } });
小程序的生命周期:
app.js
App({ onLaunch: function (options) { // 小程序初始化逻辑 console.log('App Launch', options); }, onShow: function (options) { // 小程序从后台进入前台 console.log('App Show', options); }, onHide: function () { // 小程序从前台进入后台 console.log('App Hide'); }, onError: function (msg) { // 小程序发生脚本错误或 API 调用失败时触发 console.log('App Error', msg); }, onPageNotFound: function (res) { // 小程序打开的页面不存在时触发 console.log('Page Not Found', res); wx.redirectTo({ url: 'pages/index/index' }); } });
index.js
Page({ data: { message: "欢迎来到首页" }, onLoad: function (options) { // 页面加载时触发 console.log('Page onLoad', options); this.setData({ message: "首页数据加载完成" }); }, onShow: function () { // 页面显示时触发 console.log('Page onShow'); }, onReady: function () { // 页面初次渲染完成时触发 console.log('Page onReady'); }, onHide: function () { // 页面隐藏时触发 console.log('Page onHide'); }, onUnload: function () { // 页面卸载时触发 console.log('Page onUnload'); }, onPullDownRefresh: function () { // 处理下拉刷新 console.log('Page onPullDownRefresh'); wx.stopPullDownRefresh(); // 停止刷新 }, onReachBottom: function () { // 页面触底时触发 console.log('Page onReachBottom'); }, onShareAppMessage: function () { // 用户点击右上角分享时触发 console.log('Page onShareAppMessage'); return { title: '首页', path: '/pages/index/index' }; }, navigateToLogs: function () { wx.navigateTo({ url: '/pages/logs/logs' }); } });
如何理解WXSS和WXS的区别:
WXSS类似于CSS
WXS类似于JavaScript。 在小程序中多用于过滤器。
如何使用npm引入UI组件:
1 使用Vant Weapp
2 初始化 npm
根目录空白区域右键
3 npm init
\
npm init 的时候初始化一路回车,目的是获取package.json
安装vant-weapp
安装好了多处node_modules:
如何导入使用npm: 工具---构建npm
为了避免样式冲突,必须删除v2:
引入包:
加入按钮:
展示:
分包的概念:(分包的目的是加载首页可以快一点!)
未分包:
分包:
如何进行分包:
在app.json中,有一个和pages评价的,再创建一个subpackages作为分包。
分包的特点:
1 小程序加载的时候先不加载分包,先加载主包。
2 加载主包之后会再执行分包预下载。
小程序 分包和预下载分包举个例子
文件目录结构:
├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ ├── index.wxss │ ├── logs │ │ ├── logs.js │ │ ├── logs.json │ │ ├── logs.wxml │ │ ├── logs.wxss ├── packageA │ ├── pages │ │ ├── pageA1 │ │ │ ├── pageA1.js │ │ │ ├── pageA1.json │ │ │ ├── pageA1.wxml │ │ │ ├── pageA1.wxss │ │ ├── pageA2 │ │ │ ├── pageA2.js │ │ │ ├── pageA2.json │ │ │ ├── pageA2.wxml │ │ │ ├── pageA2.wxss
预下载分包配置:(使用preloadRule)
{ "pages": [ "pages/index/index", "pages/logs/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/pageA1/pageA1", "pages/pageA2/pageA2" ] } ], "preloadRule": { "pages/index/index": { "packages": ["packageA"], "network": "all" // 在所有网络条件下都预下载 } } }
预下载分包的意思:进入某一个分包页面的时候,再下载对应的分包。