初学小程序

2021.7.10

微信小程序初学

官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7

• 首先注册账号 需要一个跟微信没有任何关系的邮箱

  

• 下载小程序开发工具 并扫码登录 创建项目

  AppId可以在https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1375177217小程序后台开发者设置中查看

  

1. 小程序的结构目录

小程序框架(原生框架为`Mina`)的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

​ 小程序框架提供了自己的视图层描述语言 wxml和 wxss，以及Javascript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

对比:

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	JavaScript	JavaScript
配置	无	JSON

通过对比可得,传统web是三层结构。而微信小程序,是四层结构, 多了一层配置.json

1.1 基本项目目录

2. 小程序配置文件

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json和页面自己的page.json

配置文件中不能出现注释

2.1 全局配置app.json

若需要新建页面, 可以手动在左边文件夹出右键新建然后在挨个创建其他文件 或者直接在app.json中的page里进行添加页面 保存后则会自动生成

该pages中的顺序为页面的展示顺序, 若想要首页为刚创建的Demo1则可以将demo1放在第一行

在window中可以进行导航的基本配置信息

• enablePullDownRefresh 开启下拉刷新操作 默认为false
• backgroundTextStyle 下拉刷新的图标的颜色 dark/light
• backgroundColor 下拉刷新时的背景颜色

2.1.1 tabbar

测试

参数配置可以在官网查看api

2.2 页面配置 page.json

在某页面中的json文件进行该页面的配置则会覆盖全局配置的属性信息

2.3 sitemap 配置

小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信索引。

3. 模板语法

WXML (WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

3.1 数据绑定

3.2 运算

3.3 数组和对象的循环

Block标签

• 占位符的标签
• 写代码的时候 可以看到这个标签的存在
• 页面渲染后 小程序会把它移除掉

3.4 条件渲染

<view>
    <view wx:if="{{true}}">显示</view>
    <view wx:if="{{false}}">隐藏</view>
</view>

=========================================================
<view>
    <view wx:if="{{true}}">1</view>
    <view wx:elif="{{false}}">2</view>
    <view wx:else="{{true}}">3</view>
    <!-- 实现隐藏 -->
    <view hidden>hidden</view>
</view>

4. 事件绑定

小程序中绑定事件, 通过bind关键字来实现 如 bindtap bindinput bindchange 等

不同的组件支持不同的事件, 具体看组件的说明即可

wxml

<input bindinput="handleInput"/>

page

Page{
  //绑定的事件
    handleInput: function(e){
    	    
    }
}

测试

实现 按钮点击+1和-1

• 定义两个按钮 并绑定事件

  

• 编写方法

  

5. 样式 WXSS

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。简单得说就是相对大小吧。

1. 小程序中不需要主动引入样式文件。（即不需要link，只用在相关文件夹里创建好有关文件即可）
2. 如果想在wxss或css中计算rpx得利用到calc属性：rpx（单位）的位置可以随便放，但要注意，周围不要有空格。

view{
  width:calc(750rpx*200/320);
  /* width:calc(750*200/320rpx);这样也可以 */
  height:200px;
  font-size:40px;
  background-color:red;
}

测试

wxss代码

view{
    /*width: 200rpx;*/
    height: 200rpx;
    font-size: 40rpx;
    background-color: aqua;
    width: calc(750rpx * 100/ 375);
}

wxml代码

<view>
    乌拉拉
</view>

5.1 样式导入

wxss中直接就支持 样式的导入功能 也可以和 less中的导入混用

使用@import语句可以导入外联样式表,只支持相对路径

.small-p{
 	padding: 5px;   
}

@import "common wxss";
.middle-p{
    padding:15px;
}

测试

• 创建style文件夹 并创建common.wxss

  

• 编写代码

  

• 在demo5页面中的wxss中引入使用

  

  

5.2 选择器

小程序不支持通配符*

//不支持 * 
*{
    margin:0;
    padding:0;
}

目前支持的选择器有:

5.3 小程序中使用less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

1. 例如在vscode中可以安装插件easy less

2. 在vs code的设置中加入如下配置

   "less.compile": {
   	"outExt": ".wxss"
   }
   

3. 在要编写样式的地方, 新建less文件, 如index.less然后正常编辑即可

6. 常见组件

如: view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox等

view

代替原来的div标签

<view hover-class="h-class">
 	Click
</view>

text

• 文本标签
• 只能嵌套text
• 长按文字可以复制
• 可以对控制回车 进行编码

image

• 图片标签, image组件默认宽度320px、高度240px
• 支持懒加载

mode有效值

mode有13种模式, 其中4种是缩放模式, 9种是裁剪模式

测试

swiper

微信内置的轮播图组件

测试

• 编写轮播图

  

• 编写样式

  

navigator

导航组件 类似超链接标签

测试

rich-text

**富文本标签: **可以将字符串解析成对应标签, 类似vue中的v-html功能

---

• 在data中定义html标签文本

  

• 页面使用rich-text标签

---

或者自定义data文本标签 不常用

button

测试

<button
   type="default"
   size="15px"
   loading="true"
   plain="true"
>
    Click
</button>

open-type的合法值

开放能力一

例如在使用getUserInfo时 需要在js中定义该方法获取回调值

开放能力二

因为使用的是测试appid无法在真实的手机端显示 这时改为自己的appid进行测试

在后台添加客服微信

即可编译后扫码在手机上进行小程序的测试

icon

radio

可以通过color属性来修改颜色

需要搭配radio-group一起使用

测试

checkbox

可以通过color属性来修改颜色

7. 自定义组件

类似于vue或者react中的自定义组件

7.1 创建自定义组件

类似于页面,一个自定义组件由json wxml wxss js 4个文件组成

可以在微信开发者工具中快速创建组件的文件结构

测试

在tabs.json中可以看到自定义组件声明

{
  "component": true,   //证明是一个组件
  "usingComponents": {}
}

在某页面中引入该组件 在该页面的json文件中配置

然后在页面引入即可

7.2 自定义组件的样式优化

• 在tabs组件编写样式

  

  

  

• 由于以上是将内容写死的 不太友好

  1. 在tabs中的js文件中定义该四个标签

     

  2. 在页面循环遍历展示数组 并控制选中信息

     

7.3 标题的激活和选中

• 首先在tabs.wxml中添加属性索引

  

• 在tabs.js文件中编写方法

  /**
     * 1. 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下
     * 2. 组件.js 文件中 存放事件回调函数的时候 必须要存在methods方法中
     */
    methods: {
      hanldeItemTap(e){
        /*
          1. 绑定点击事件 需要在methods中绑定
          2. 获取被点击的索引
          3. 获取原数组
          4. 对数组循环
            1. 给每一个循环 选中属性 改为 false
            2. 给当前的索引的项 添加激活选中效果就可以了
         */
        // 获取索引
        const {index} = e.currentTarget.dataset;
        // 获取data中的数组
        // 对于复杂类型进行结构的时候  复制了一份 变量的引用而已
        // 最严谨的做法 是重新拷贝一份 数组 在对这个数组的备份进行处理
        //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
        let {tabs} = this.data;
        // 循环数组
        //[].forEach 遍历数组 遍历数组的时候 修改了v 也会导致原数组被修改
        tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
  
        this.setData({
          tabs
        })
      }
    }
  

  

7.4 父向子传递数据

• 在父组件引用子组件的标签上添加传递的数据

  

• 在子组件中的.js文件中进行参数的接收

  

• 在子组件的页面上进行使用参数测试

  <view>{{aaa}}</view>
  

将之前的tabs移动至父组件 子组件进行接收(更加灵活)

1. 将tabs.js中定义的tabs数组剪切至demo7.js(父组件)中

   

2. 在demo7.wxml(父组件)中向子组件传递tabs数组

   <Tabs tabs="{{tabs}}"></Tabs>
   

3. 在tabs.js中进行tabs数组的接收定义

   

7.5 子向父传递数据

由于以上写法 不够灵活改变数据无法将父组件中的tabs进行修改

而是数据变化时在子组件中进行改变

• 在Tabs.js中添加点击事件并把数据传递给父组件

  

  triggerEvent是组件中的触发事件

• 在demo7.wxml(父组件)中绑定点击事件

  

• 在父组件的.js文件中 自定义该点击事件

  //自定义事件 用来接收子组件传递的数据
  handleItemChange(e){
      //接收传递过来的参数
      const {index}=e.detail;
      let {tabs} = this.data;
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      this.setData({
          tabs
      })
  },
  

  该方法与data同级

7.6 自定义组件插槽slot

在自定义组件Tabs中 之前所展示的是写死的内容

现在该为slot

• 

• 在对应的父组件引用中进行数据的修改

  

• 测试

  

  数据动态的显示

7.7 一些组件的补充属性

8. 生命周期

分为 应用生命周期 和 页面生命周期

8.1 应用生命周期

8.2 页面生命周期

Page生命周期整体流程图