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

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

** 学习注册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引用展示

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

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

常见内置组件

<view></view>

<text></text>

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

<button></button>

• 块级元素

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对象

<image></images>

• 比较重要的属性：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"/>

组件共同属性

wxss

app.wxss

• 全局样式

111.wxss (111为文件的名称)

• 页面中的样式

style=""

• 行内样式

1. 优先级：行内>页面>全局 

2. 支持的选择器以及权重 可在文档查找

扩展-尺寸单位

开发微信小程序可以用 iPhone6 作为视觉稿的标准

1. rpx

• 可以根据屏幕宽度进行自适应，规定屏幕为750rpx
• 如在iphone6，屏幕宽度为375px，有750个物理像素，即 1rpx=0.5px=1物理像素

2. 在wxss中设置样式时，使用rpx单位，原本的 px数值 * 2，单位写为 rpx