从零开始 | 原生微信小程序开发（二）

最新推荐文章于 2024-07-24 16:18:16 发布

paipaiii

最新推荐文章于 2024-07-24 16:18:16 发布

阅读量1.6k

点赞数 2

分类专栏：微信小程序开发文章标签：微信小程序前端

本文链接：https://blog.csdn.net/m0_61771965/article/details/127558022

版权

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

4 篇文章 1 订阅

订阅专栏

！打好最基础的部分，为后期的项目做好准备

** 学习注册App函数和Page函数

** 认识一些常见组件，其余组件使用时查找文档

** 对于wxss和css，两种区分好

App函数、Page函数

1. 每个小程序都需要在app.js中调用该函数注册小程序实例

注册时，可以绑定对应生命周期函数，执行对应代码
可以做些什么事呢？

小程序进入场景

有很多种方式，可在app.js中调用 onshow 函数控制台查看

App({
onShow(option) {
    // 可以用来判断小程序的进入场景 scene对应进入方式 可在文档查看
    console.log(option);
  }
})

onLunch 函数也可以查看
1001的应用场景偏多

共享数据

在app.js文件中的globalData中定义数据，可共享

能够实现什么功能

页面跳转

1. 整理了案例：

在首页点击按钮跳转到相应案例页面

可以用循环的方式绑定，提高写代码效率
data- 的功能（目前知道的）

item 是自己命名的，可在控制台中的target中找dataset，里面有相应的{{}}值

用来鉴别哪个按钮触发事件

值得注意的是：

路径中不能出现中文名，否则报错

注册页面-Page函数

Page({})

1.作用一：在生命周期函数中发送网络请求，请求数据

在 onLoad 函数中，如下案例

值得注意的是：

此时控制台会报错，因为域名原因，这里先关掉域名检测，后面再具体学习

2. 作用二：初始化一些数据，定义本地固定的数据

data中定义，方便被wxml引用展示

监听wxml中的事件，绑定对应事件函数
生命周期

文档目录
理解起来其实还可以，就是对应打开页面时执行的生命周期函数

常见内置组件

行内元素
注意：属性类型是布尔型的话直接加进去的写法即可设置为true，如下

块级元素

1. 一些基本使用，在文档中查对应属性

<button>按钮</button>
<button size="mini" type="primary">type属性</button>
<button size="mini" type="warn">type属性</button>
<button size="mini" class="mycolor">自定义属性</button>
<button size="mini" disabled>禁用属性</button>
<button size="mini" plain>plain属性</button>
<button size="mini" hover-class="active">hover效果</button>
<button size="mini" loading>loading属性</button>

2. open-type属性

以前的做法，但是现在不支持通过该方法获得用户信息，获取的是默认的头像和“微信用户”

<button size="mini" open-type="getUserInfo" bindgetuserinfo="getUserInfo1">用户信息1</button>
// 电话号码个人开发无法获取，企业开发可以，但是想要与后台配合
<button size="mini" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">电话号码</button>

<button size="mini" bindtap="getUserInfo">用户信息2</button>
getUserInfo() {
    // 调用API，获取用户信息
    wx.getUserProfile({
      desc: 'desc', // 必须传的参数
      // 早期小程序的api基本不支持Promise
      // 这里支持promise风格了 避免产生回调地狱
      // success: (res) => {
      //   console.log(res);
      // }
    }).then(res => {
      console.log(res);
    })    
  },
}

更新后发布的获取方法，不需要open-type属性
调用API

desc：必需的属性

res：有对应的用户头像和昵称

值得注意的是，这里更改为api请求用户信息，支持返回Promise对象

比较重要的属性：mode
可以在自己尝试一下mode的多种属性，体验一下照片不同的放置方法

<image src="/assets/tarbar/image10.jpg"></image>
<image src="/assets/tarbar/image10.jpg" mode="aspectFit"></image>
<!-- 实现：选择本地图片，并展示出来 -->
<button bindtap="onChooseLocalImage" class="mycolor">选择本地图片</button>
<image src="{{chooseImg}}" mode="widthFix"></image>
onChooseLocalImage() {
    wx.chooseMedia({
      mediaType:["image"],
    }).then(res => {
      console.log(res);
      this.setData({
        chooseImg:res.tempFiles[0].tempFilePath  // 展示照片 记得调用该函数
      })
    })
  }

注意：选择完照片后返回的结果是将链接放入数组，即可选择多张照片，参照文档

<scroll-view></scroll-view>

两个方向的滚动，查看文档
注意：要使用flex布局，这里得先设置属性enable-flex，注意下面的item要设置flex-shrink: 0; 使得盒子不被压缩

<input>

新增属性，可对数据进行双向绑定
注意这里的value必须写

<input type="text" model:value="{{message}}" class="inp"/>

组件共同属性

id	String	组件的唯一标识
style	String	组件内联样式
class	String	样式类
data-*	Any(自定义属性)	组件上触发的事件时，会发送给事件处理函数
bind/catch	EventHandler	组件的事件
hidden	Boolean	组件是否显示