小程序学习笔记

最新推荐文章于 2024-09-03 16:46:47 发布

克里斯蒂亚诺更新

最新推荐文章于 2024-09-03 16:46:47 发布

阅读量803

点赞数 11

分类专栏：小程序文章标签：小程序学习笔记

本文链接：https://blog.csdn.net/weixin_36152801/article/details/140072139

版权

小程序专栏收录该内容

22 篇文章 0 订阅

订阅专栏

小程序和普通网页开发的区别：

1 运行环境不同：网页在浏览器，小程序在微信环境

2 API不同：网页可以操作DOM BOM，小程序可以调用微信环境的地理位置扫码和支付。

3 开发模式不同：浏览器+IDE, 小程序账号+小程序开发者工具+小程序项目

小程序UI组件示例：

注册小程序和查看AppID:

网址：https://mp.weixin.qq.com/

扫码：使用太阳的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"  // 在所有网络条件下都预下载
    }
  }
}

预下载分包的意思：进入某一个分包页面的时候，再下载对应的分包。

克里斯蒂亚诺更新

关注

11
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
小程序学习笔记

回调函数有：type，timestamp，target，currentTarget，detail，touches.....1 这里的container1是自定义的类，注意不要是container，因为这个类有系统自带样式。ajax存在于浏览器中，微信的宿主是微信，所以不称呼“发起ajax请求”，而是称呼“发起网络请求”编译和预览的区别：（一个是左侧的开发者工具查看，一个是微信扫码后查看）预下载分包的意思：进入某一个分包页面的时候，再下载对应的分包。rpx 是微信小程序独有的，用来解决屏适配的尺寸单位。
复制链接

扫一扫

专栏目录