微信小程序开发 --- 进阶小程序

本文由 钟翰华 原创，转载请将此行粘贴至文章开头，谢谢！原文：https://blog.csdn.net/qq_41517936/article/details/99176112

Git详细使用命令 https://blog.csdn.net/qq_41517936/article/details/98780052

微信小程序开发 --- 每天的学习进度  https://blog.csdn.net/qq_41517936/article/details/98991262

微信小程序开发 ---  初始小程序（基础） https://blog.csdn.net/qq_41517936/article/details/98629109

微信小程序开发 ---  进阶小程序  https://blog.csdn.net/qq_41517936/article/details/99176112

微信小程序开发 ---  进阶小程序2  https://blog.csdn.net/qq_41517936/article/details/99681000

微信小程序开发 ---  进阶小程序3  https://blog.csdn.net/qq_41517936/article/details/99706581

目录

9、注册（启动）小程序时一般会做什么？

10、注册Page时一般做什么？Page的生命周期

11、页面组件、所有组件的共同属性

12、视图容器View、媒体组件Image、表单组件Input、视图容器Scroll-View

13、WXML、WXSS、WXS详细讲解

---

9、注册（启动）小程序时一般会做什么？

GitHub：https://github.com/zhonghanhua/LearnMiniProgram.git ，tag  03_注册APP对象

框架接口文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

console.log('在控制台上输出信息！')

注册APP

小程序运行机制：https://developers.weixin.qq.com/miniprogram/dev/framework/operating-mechanism.html

场景值列表：https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

1.判断进入场景：某些特定的打开方式可以做特殊的操作

2. 3种获取用户信息（wx.getUserInfo接口可能要升级或删除）：

1.wx.getUserInfo({})；2.button属性open-type；3.open-data开放数据

wx.getUserInfo接口：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html

button属性：https://developers.weixin.qq.com/miniprogram/dev/component/button.html

open-data属性：https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

function(xxx)：xxx为函数返回的对象，返回的信息都在xxx对象中

用户打开page.wxml时，直接显示用户头像(open-data)，当点击按钮时，获取用户名字，并重新设值name变量

page.js：；

page.wxml：

点击按钮后显示名字

这种方式即将更改，app.js：

3.全局共享数据

app.js：

page.js：

 

10、注册Page时一般做什么？Page的生命周期

Page.js中的Page对象(Object object)：注册小程序中的一个页面。接受一个Object类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

Page属性文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

视图线程和逻辑线程：

js逻辑层中回调函数用箭头函数比较好

 

11、页面组件、所有组件的共同属性

GitHub：https://github.com/zhonghanhua/LearnMiniProgram.git ，tag  04_text和button组件

所有组件文档：https://developers.weixin.qq.com/miniprogram/dev/component/

样式中用rpx可以自适应屏幕大小，在iphone6下，1px=2rpx

所有的组件，有需要交互的属性都可以用变量{{}}来绑定，boolean类型的属性必须要用{{}}，不赋值为true，不填或不用{{}}为默认（看文档）

 

12、视图容器View、媒体组件Image、表单组件Input、视图容器Scroll-View

GitHub：https://github.com/zhonghanhua/LearnMiniProgram.git ，tag  05_常用内置组件

View属性文档：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

Image属性文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

系统API文档：https://developers.weixin.qq.com/miniprogram/dev/api/

Input属性文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

Scroll-View：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

View属性：如果属性为number，填写数字不生效的话，尝试使用{{}}

Image属性：image可以单标签也可以双标签，一般用单标签<image/>，默认大小320px*240px

注意路径，..表示返回上一层目录， 直接/表示根目录下，下面2种写法效果一样

<image src="../../assets/text/1.png"/>
<image src="/assets/text/1.png"/>

Input属性：一般也是用单标签

Scroll-View属性：一般是局部滚动，也就是在Scroll-View的容器中进行滚动，不影响整体页面

整体效果（只截图2个scroll-view）：

 

13、WXML、WXSS、WXS详细讲解

wxml文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

wxss文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

wxs文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

1.WXSS

多个样式用空格隔开即可class = ' page app '

1.1权重值（优先权）

1.2.rpx自适应屏幕：

1.3.WeUI.wxss：样式导入

WeUI.wxss是官方提供的样式库，不熟悉CSS的可以用这个快速开发（我我我我我我）

 

2.HTML

注意大小写要区分

2.1.Mustache语法细节（{{}}）：{{}}中可以是变量、表达式

2.2.条件判断

wx : if / wx : elif

hidden

hidden和wx : if 的区别

hidden：改变CSS样式

if：直接销毁组件

如何选择这两种方式呢？如果频繁切换显示隐藏，用hidden（因为 wx : if 要不断的创建和销毁，关乎性能）

2.3.列表渲染wx:for

每次遍历返回对应类型的item，遍历的String数组，item就是String

2.4.block标签，很常用，只接受wx：if / for等控制属性，性能好

2.5.列表渲染- 给item/index另取名称

使用场合：多层遍历，防止重名混淆

2.6.列表渲染 - key作用

key文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html#wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input中的输入内容，switch的选中状态），需要使用 wx：key来指定列表中项目的唯一的标识符（数组中不能有相同的数值）。

没有Key：wx：for遍历的数组发生改变，那么从改变的地方的后面数据会全部发生变化（重新赋值）

有Key：绑定原先数据的id，当数组数据改变后，数组不会重新赋值，而是把新的数据创建好之后，插入对应位置

2.7.template模板（组件布局的代码复用，减少代码，便于维护）

 

2.8.wxml导入（import、include）

一般在根目录创建一个目录wxml或者templates来存放模板，命名：如head、bottom.wxml

import：一般用于导入模板template，提高组件的复用率，减少代码量，便于维护；不能递归引用（不可以在template中import template）

<import src="/xxx/template.wxml"/>

include：将目标文件中除了<template/><wxs/>外的整个代码引入

<include src="/xxx/head.wxml"/>

一般用于导入不同页面的相同布局，如每个页面都有的顶部公告，底部说明；可以递归引用（可以在template中include）

 

3.导入wxs（用于格式化页面数据显示，比如显示2位小数，格式化时间等）