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

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

** 学习注册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	组件是否显示

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