结合 wx-demo-start 讲入门小程序开发

最新推荐文章于 2022-11-10 22:43:30 发布

大厂女程序媛

最新推荐文章于 2022-11-10 22:43:30 发布

阅读量453

点赞数

分类专栏：小程序开发文章标签：小程序开发

本文链接：https://blog.csdn.net/tyutjavalily/article/details/79392095

版权

小程序开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

本篇文章是一篇学习笔记的分享，主要包含：常用组件、API、模板、路由、生命周期和页面间的数据传递，适合初学者学习。
wx-demo-start 的源码：https://github.com/ycshill/wx-demo-start.git

1. 用到组件

视图容器
这部分是比较常用的内容
- view
  最常用的组件，相当于“div”
- scroll-view
  可滚动的视图区域，常用属性：”scroll-x”,”scroll-y”，一般用来做下拉滚动，垂直滚动的时候，需要给其设置固定高度
- swiper
  滑块视图容器，一般是给 swiper 设置高度，swiper-item 会根据 swiper 的高度来撑开。
基础内容
- icon
  图标，主要属性包含：”type”, “size”,”, “color”
- text
  文本，支持\n

表单组件
这部分内容比较重要，可以自己撸遍官方代码。

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch"/>
  </view>
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>

  <view class="section">
    <view class="section__title">input</view>
    <input name="input" placeholder="please input here" />
  </view>
  <view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <label><radio value="radio1"/>radio1</label>
      <label><radio value="radio2"/>radio2</label>
    </radio-group>
  </view>
  <view class="section section_gap">
    <view class="section__title">checkbox</view>
    <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

媒体组件
- image
  图片，有个 “mode” 属性，用来进行图片裁剪、缩放的模式。

其他

block
一般用在循环的地方

 <block wx:for="{{movies}}" wx:for-item="movie">
  <template is="movieTemplate" data="{{...movie}}"/>
</block>

2. 用到API

网络
- 发起网络请求：
  - wx.request(OBJECT) 发送网络请求，请求数据
媒体
- 图片
  - wx.previewImage(OBJECT)：预览图片
- 背景音频播放管理
  - wx.getBackgroundAudioManager()：背景音频播放管理，获取全局唯一的背景音频管理器 backgroundAudioManager，注意onPlay 和 play，其中 onPlay 是回调函数。
数据缓存
可以根据API详细理解，总结来说就是set、get、remove、clear这四大类，同时分为同步和异步，同时在调试的时候注意在模拟器上有一个清除缓存的，但是真机没有，所以在真机上的时候，出现bug的时候，要想想是不是缓存的问题。
界面
- 交互反馈
  - wx.showToast(OBJECT)\wx.hideToast()：提示框的显示和隐藏
  - wx.showLoading(OBJECT)\wx.hideLoading()： loading 提示框的显示和
  - wx.showModal(OBJECT)：显示模态弹窗
- 设置导航条
  - wx.showNavigationBarLoading()\wx.hideNavigationBarLoading(): 导航条加载动画的显示和隐藏
- 导航
  - wx.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack 可以返回到原页面，有返回按钮。
  - wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。
  - wx.switchTab(OBJECT)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

3. 模板

模板是小程序开发中很重要的一个概念，官网文档解释如下：

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

在本篇文档分享的wx-demo-start 中也大量使用了模板，例如图中的标红位置都是模板：

此处输入图片的描述

3.1 定义和使用模板

定义 template
使用 <template> 标签并未其添加 name 属性，该属性名就是模板名

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用 template
- 在 wxml 文件中引入模板文件，使用 <template> 标签和 is="name" 属性调用模板，同时可以使用 data="{{data}}" 属性向模板传入数据
```
<import src="item.wxml"/>
<template is="msgItem" data="{{...item}}"/>
```
- 在 wxml 对应的 wxss 文件中引入模板使用的 wxss 文件
```
@import "common.wxss";
```
注意事项
- 在拿到设计稿后可以根据设计稿对 template 进行分析，分析可以抽出多少个 template；
- 文件命名的时候最好以 ‘-template’ 结尾，例如: stars-template.wxml，便于区分；
- 模板中引入的本地图片，使用绝对路径，因为模板可能会在多个地方使用；
- 模板编写的时候尽量遵从从小到大的原则，而传递数据的时候最好遵从从大到小的原则；
- template 知识一个占位符，在html中不会渲染；
- template 中的 js 不起作用，只能在调用模板的 js 文件中使用；

4. 数据绑定

小程序中的数据绑定是单向数据绑定的。

数据渲染: {{}}
```
  <view>{{message}}</view>
```
设置数据: 使用 setData()
```
  this.setData({
    movie: movie,
  })
```

5. 路由绑定

wx.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack 可以返回到原页面，有返回按钮，会触发 onHide ;
wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面，会触发 onUnload ;
wx.switchTab(OBJECT)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.redirectTo ({
  url: '../posts/post',
  success: function () {
    console.log('success')
  },
  fail: function () {
    console.log('fail');
   },
  complete: function () {
    // 成功和失败都会执行
    console.log('complete');
  }
});

6. 事件

两种事件：
- bind事件名：冒泡事件
- catch事件名：非冒泡事件
tap事件，也就是点击事件：
- event.target: 当前点击的元素
- event.currentTarget: 被捕获的元素
input中获取value：event.detail.value

6. 生命周期

onLoad：页面加载，一般用来获取数据；
onShow：或从后台进入前台显示；
onReady：用于操作DOM；
onUnload: 页面被关闭；
onHide:页面隐藏；

注意：一进来页面的时候会先触发 onLoad , 然后触发 onShow, 最后触发 onReady ;

7. 页面之间数据传递

全局变量
在 app.js 文件中定义全局变量

App({
  // 全局变量
  globalData:{
    g_isPlayMusic: false,
  }
})

在要使用js中使用 getApp() 引入，并使用数据

  // 引入
  const app = getApp();
  //使用
  if (app.globalData.g_isPlayMusic && app.globalData.g_currentMusicPostId === this.data.postId) {
    this.setData({
      isPlay: true,
    });
  }

利用缓存
设置缓存数据

wx.setStorageSync('posts-collected', postsCollected);

获取缓存数据

wx.getStorageSync('posts-collected');

利用url传参

在 A.wxml 中使用自定义属性 data-myName 定义变量
```
  <view data-postId="{{postId}}"></view>
```

在 A.js 中使用 event.currentTarget.dataset.myName 获取值，注意自定义属性名中的大写变小写；

 onPostTap: function (event) {
    const curPostId = event.currentTarget.dataset.postid;
    wx.navigateTo({
      url: `post-detail/post-detail?id=${curPostId}`,
    })
  },

在B.js 中获取数据

onLoad(options){
  console.log(options.postid);
}

利用发射事件和接收事件的方式 (待定)

8. 项目开发的技巧注意事项

快速新建四个文件的技巧：在pages中输入路径，然后保存；
在编程的过程当中，如果是异步的话，返回数据不不能用return，只能使用回调函数；
图片模糊：webkit-filter:blur(20px)；
接收到的数据做判空的容错的处理：一般来说二级属性的数据会进行判空，一级的判空的概率不大。
app.json 中能够配置i很多选项，但是单个的只能够配置 window
尺寸单位：以iphone6 750的设计稿，直接1:1的用rpx，rpx 是会随着屏幕的分辨率进行改变的，但是对于不会随着分辨率进行改变的话，就不用使用rpx单位了；

大厂女程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
结合 wx-demo-start 讲入门小程序开发

前言本篇文章是一篇学习笔记的分享，主要包含：常用组件、API、模板、路由、生命周期和页面间的数据传递，适合初学者学习。 wx-demo-start 的源码：https://github.com/ycshill/wx-demo-start.git1. 用到组件视图容器这部分是比较常用的内容 view 最常用的组件，相当于“div”scroll-view 可...
复制链接

扫一扫