微信小程序学习

1.小程序各个目录作用

avatar
关于全局配置参见：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
例如配置小程序首页
小程序首页如果没有配置entryPagePath，则会取全局app.json文件 pages 属性的首元素作为启动小程序的默认首页。也可以使用 entryPagePath手动指定首页。
考虑到最简化的开发目录例如：

├── app.js  
├── app.json  
├── app.wxss  
├── pages  
│   │── index  
│   │   ├── index.wxml  
│   │   ├── index.js  
│   │   ├── index.json  
│   │   └── index.wxss  
│   └── logs  
│       ├── logs.wxml  
│       └── logs.js  
└── utils

2.测试各种小程序组件

微信小程序使用的是flexible box布局，属性和html语法是一致的。一般使用rpx描述box大小。rpx尺寸单位，rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
以width举例：

width: 300rpx; 指定像素点
width: 75%; 指定在屏幕中的比例
width: fit-content(20em); 相似郁wrap-content
width: auto; 浏览器将会为指定的元素计算并选择一个宽度。

可以使用SCSS编译WXSS，参考https://blog.csdn.net/weixin_59533746/article/details/132214081。
scss 使用参考：https://www.cnblogs.com/g-1024/p/11477172.html

2.1 视图容器view和快捷布局

在小程序中view标签和html中的div标签类似，支持设置flex布局。
需要注意view的参数hover-stop-propagation，此参数可以阻止冒泡事件向父类传递点击事件。
可以参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上；
flex-wrap：子元素的换行方式：不换行；换行，第一行在上面；换行，第二行在上面；
flex-flow：是子元素的排列方式和换行方式的简写；
justify-content：设置子元素的水平对齐方式；
align-items：设置子元素的垂直对齐方式；
align-content：设置多个元素组成的整块的对齐方式；

order：按照数字大小设置各个子元素之间的排列方式；
flex-grow：类似安卓的android:layout_weight="XXX"，按照权重分配剩余空间进行等比例放大；
flex-shrink：类似安卓的android:layout_weight="XXX"，按照权重进行等比例缩小；
flex-basis：设置子元素原始所占主轴空间大小（宽度）；
flex：是设置放大、缩小和原始大小的简写，建议优先使用此方式；
align-self：单独设置特定元素的对齐方式，忽略align-items；

2.2 text、icon、progress

text 类似 html中的span的标签
icon标签则是小程序中默认的图标
progress标签则是小程序中进度条

2.3 scroll-view

功能描述
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

横向滚动需打开 enable-flex 以兼容 WebView，如
滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确
使用 worklet 函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。

2.4 movable-area

movable-view的可移动区域。

2.5 root-portal

使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。

2.6 app.json

2.7 image

图片加载,注意model的区别。

2.8 页面跳转

navigate
wx
wx switchtable

3.app 生命周期和数据绑定

3.1 app.js生命周期和globalData

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

关于箭头函数

 箭头函数就是lambda表达式，没有自己的this对象，他的this对象是在定义时明确的，而不是在运行时明确的。而且不能修改。换句话说，在哪个类中定义箭头函数，那么这个箭头函数就挂在了哪个实例中。而不是通过语义分析。

3.2 关于data中的数据修改

data的数据可以通过setdata函数做修改，一般不用直接修改，直接修改不能刷新UI。
举例：

  onShow() {
    setTimeout(()=>{
      this.setData({
        name:"world"
      })},2000);
  },

其中setData函数注释如下：

 /** `setData` 函数用于将数据从逻辑层发送到视图层
         *（异步），同时改变对应的 `this.data` 的值（同步）。
         *
         * **注意：**
         *
         * 1. **直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致**。
         * 1. 仅支持设置可 JSON 化的数据。
         * 1. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
         * 1. 请不要把 data 中任何一项的 value 设为 `undefined` ，否则这一项将不被设置并可能遗留一些潜在问题。
         */

3.3 关于 wx:if wx:else wx:for

<view wx:for="{{array}}" wx:for-item="row" wx:for-index="idx" wx:key="idx">
  书名：{{idx}} - {{row}} - {{}}
</view>

3.4 事件

事件是视图层到逻辑层的通讯方式。
可以参考：https://blog.csdn.net/Javascript_tsj/article/details/125452591

html
<view class="block" data-x="what?" bindtap="onClick" style="background-color:{{backgroundColor}}">

</view>

javascript
  onClick(event){
    console.log("this is onCLick.");
    console.log(event)
    this.setData(
      {backgroundColor:"rgb(52, 45, 12)"}
    );
  }

3.5 表单

3.6 路由跳转

微信小程序页面跳转：wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack

wx.switchTab（跳转主页）
跳转到tabBar页面，并关闭其他所有非tabBar页面，用于跳转到主页。
wx.reLaunch（关闭所有页面跳转）
关闭所有页面，打开到应用内的某个页面。
wx.redirectTo（关闭当前页面跳转）
关闭当前页面，跳转到应用内的某个页面，但不允许跳转到tabBar页面。
wx.navigateTo（保留页面跳转）
保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面。
wx.navigateBack（页面返回）
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

4 小程序官方Api

showToast
showLoading
常用的导航栏api
windowsUI
tabBar
navigate
wx.request

5 微信小程序高级用法

5.1 初始化搭建

https://blog.csdn.net/weixin_64729620/article/details/133868227

5.2 自定义组件

https://blog.csdn.net/m0_64875238/article/details/127891877

6.微信小程序几个小例子

6.1 页面初始化并配置全局样式

app.wxss中配置全局颜色
app.json文件设置windows和navigationBar
app.json文件设置导航tabbar

6.2 页面配置公共的头部组件

1、在components文件加下新建组件文件夹，在该文件夹下新建组件
在componets中创建组件，类似一个页面有html、css、js、json这4种文件。
2、在app.json中注册该组件。
3、父组件可以像使用普通标签那样使用自定义标签。
4、关于数据交互：其中父组件向子组件传递信息，可以通过给自定义参数赋值：

<testValue ruleShow="true" name="张顺" age="16" bind:myevent="onMyEvent"></testValue>

子组件向父组件传值，可以通过绑定回调事件的方式：

//子组件中监听button事件
<button bind:tap="onTap">点击这个按钮将触发“myevent”事件</button>
//在回调中把消息冒泡出去
// 此处编写回调方法
     onTap:function(e) {
      //可以consolo.log(e)查看触发onTap事件时传递的值
      console.log(e);
      var myEventDetail = {}; // detail对象，提供给事件监听函数(需要传递给父组件的值)
      var myEventOption = {
				bubbles: false,//事件是否冒泡,默认false
        composed: false,//事件是否可以穿越组件边界，为 false 时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部,默认false
        capturePhase: false,//事件是否拥有捕获阶段,默认false
			}; // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption);
    }

6.3 小程序UI组件库

https://vant-contrib.gitee.io/vant-weapp/#/home
https://tdesign.tencent.com/

posted @ 2024-01-31 11:59 身带吴钩阅读(1) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

身带吴钩

微信小程序学习

微信小程序学习

1.小程序各个目录作用

2.测试各种小程序组件

2.1 视图容器view和快捷布局

2.2 text、icon、progress

2.3 scroll-view

2.4 movable-area

2.5 root-portal

2.6 app.json

2.7 image

2.8 页面跳转

3.app 生命周期和数据绑定

3.1 app.js生命周期和globalData

3.2 关于data中的数据修改

3.3 关于 wx:if wx:else wx:for

3.4 事件

3.5 表单

3.6 路由跳转

4 小程序官方Api

5 微信小程序高级用法

5.1 初始化搭建

5.2 自定义组件

6.微信小程序几个小例子

6.1 页面初始化并配置全局样式

6.2 页面配置公共的头部组件

6.3 小程序UI组件库

公告