微信小程序

一、代码的构成

1、目录介绍

pages：用来存放所有小程序的页面。
- 每个页面包含四个文件
  - xx.js：页面的脚本文件，存放页面的数据、事件、处理函数等。
  - xx.json：当前页面的配置文件，配置窗口的外观、表现等。
  - xx.wxml：页面的模板结构文件。类似html文件
  - xx.wxss：当前页面的样式表文件。类似css文件
utils：用来存放工具性质的模块
app.js：小程序项目的入口文件
app.json：小程序项目的配置
app.wxss：小程序全局样式
project.config.json：项目的配置文件
sitemap.json：用来配置小程序及其页面是否允许被微信索引

2、JSON配置文件

2.1、作用

json是一种数据格式，在实际开发中，json总是以配置文件的形式出现。通过该文件，可以对小程序项目进行不同级别的配置。

2.2、四种配置文件

app.json：当前程序的全局配置文件，包含了小程序所有页面的路径、窗口外观、界面表现、底部tab等。
- pages：用来记录当前小程序所有页面的路径
- window：全局定义小程序的所有页面的背景色、文字颜色等。
- style：全局定义小程序组件所使用的样式版本。v2代表全新的样式
- sitemapLocation：sitemap的存放路径。
project.config.json：项目的配置文件，记录小程序开发工具的个性化配置。
- description：文件的描述信息
- setting：编译相关的配置，同【详情】→【本地设置】功能。
- projectname：项目名称，不等于小程序的名称
- appid：小程序的账号
sitemap.json：用来配置小程序及其页面是否允许被微信索引
- 小程序内搜索，效果类似于网页的SEO。SEO(Search Engine Optimization)：汉译为搜索引擎优化。是一种方式。作用：提高有效访问量。别名：网站优化技术
- 作用：配置小程序页面是狗允许微信索引。
- 当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户搜索关键字和页面的索引匹配成功，小程序的页面将有可能展示在搜索结果中。
```
"rules": [{
    "action": "allow", // 允许被爬虫，配置成 disallow，则不允许
    "page": "*"  // 允许所有页面进行索引
    }]
```
xx.json：当前页面的配置文件，配置窗口的外观、表现等。
- 对本页面的窗口外观进行设置，页面中的配置项会覆盖app.json的window中相同的配置项。

3、页面

新建页面
- 在app.json → pages中新增页面的存放路径，小程序会自动帮我们创建对应的页面，并且生成四个对应的文件。
修改首页
- 修改app.json → pages中页面的先后顺序即可，会把排在第一位的页面当首页

4、WXML

WeiXin Markup Language 是一套标签语言，用来构建小程序页面的结构，类似Html
和HTML区别
- 标签名称不同
  - Html:： div、 span、 img、 a
  - WXML：view、 text 、 image、 navigator
- 属性节点不同
  - <a href="www.baidu.com">百度</a>
  - <navigator url="/pages/home/home"></navigator>
- 提供了类似于Vue中的语法
  - 数据绑定
  - 列表渲染
  - 条件渲染

5、WXSS

WeiXin Style Sheets 是一套样式语言，用于描述WXML的组件样式，类似于css
wxss和css区别
- 新增了rpx尺寸单位，会自动进行单位换算
- 提供了全局样式（app.wxss）和局部样式（xx.wxss）
- 仅支持部分css中的选择器
  - .class 和 #id
  - element
  - 并集选择器
  - ::after 和 ::befor等伪类选择器

6、js文件

处理用户的操作，例如响应用户的点击、获取用户的位置等。
三大类
- app.js
  - 小程序的入口文件
  - 通过调用App()函数来启动整个小程序
- xx.js
  - 页面的入口文件
  - 通过调用Page()函数来创建并运行页面
- 普通的js

7、快捷键

ctrl + / 注释
alt+shift+f 格式化

二、宿主环境

1、什么是宿主环境

host environment ：程序运行时所必须依赖的环境。例如Android系统和IOS系统是两个不同的宿主环境。
脱离了宿主环境的软件是没有任何意义的。

2、小程序的宿主环境

手机微信就是小程序的宿主环境
小程序借助与宿主环境提供的能力，可以完成许多普通网页无法实现的功能。比如：微信扫码、微信登录、微信登录、地理定位

3、宿主环境包含的内容

1、通信模型

通讯的主体：
- 渲染层：WXML模板和wxss样式工作在渲染层
- 逻辑层：js脚本工作在逻辑层
通讯模型
- 渲染层和逻辑层的通信：由微信客户端进行转发
- 逻辑层和第三方服务器的通信：由微信客户端进行转发

2、运行机制

2.1、小程序启动过程

把小程序的代码包下载到本地
解析app.json全局配置文件
执行app.js小程序的入口文件，调用App()创建小程序实例
小程序启动完成

2.2、页面的渲染过程

加载页面的xx.json
xx.wxml模板和xx.wxss样式
执行页面的xx.js，调用Page（）创建页面实例
页面渲染完成

3、组件

小程序的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。

3.1、视图容器

3.1.1、view

普通视图区域
类似div，是一个块级元素
用来实现页面的布局效果

<!-- 固定的三个面板 -->
<view class="container_top">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

.container_top{
  display: flex;
  justify-content: space-around;
}
.container_top view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;  
}
.container_top view:nth-child(1){
  background-color: lightgreen;
}
.container_top view:nth-child(2){
  background-color: lightskyblue;
}
.container_top view:nth-child(3){
  background-color: lightcoral;
}

3.1.2、scroll-view

可滚动的视图区域
常用来实现列表的滚动效果

<!-- 滑动组件 -->
<scroll-view class="container_middle" scroll-y="true">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

.container_middle{  
  border: 1px solid red;
  height: 120px;
  width: 100px;
}
.container_middle view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;  
}
.container_middle view:nth-child(1){
  background-color: lightgreen;
}
.container_middle view:nth-child(2){
  background-color: lightskyblue;
}
.container_middle view:nth-child(3){
  background-color: lightcoral;
}

3.1.3、swipe和swipe-item

轮播图组件和轮播图item组件

属性

属性	类型	默认值	描述
autoplay	boolean	false	是否自动切换
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgbA(0,0,0,3)	指示点颜色
indicator-active-color	color	#000000	选中点的颜色
interval	number	5000	自动切换时间，单位毫秒
circular	boolean	false	是否采取衔接切换

<!-- 轮播图 -->
<swiper class="container_swiper" autoplay  indicator-dots  indicator-color="white" indicator-active-color="red" interval="2000" circular>
  <!-- 第 1 项 -->
  <swiper-item>
    <view class = "item">A</view>
  </swiper-item>
  <!-- 第 2 项 -->
  <swiper-item>
    <view class = "item">B</view>
  </swiper-item>
   <!-- 第 3 项 -->
  <swiper-item>
    <view class = "item">C</view>
  </swiper-item>
</swiper>

.container_swiper{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightskyblue;
}
swiper-item:nth-child(3) .item{
  background-color: lightcoral;
}

3.2、基础内容

3.2.1、text

文本组件
类似于html的span，是一个行内元素

selectable：长按选中文本内容的效果，已经废弃，请使用 user-select

<!-- 废弃 -->
<view class = "item">手机号码：<text selectable>18904430979</text></view>
<!-- 建议 -->
<view class = "item">手机号码：<text user-select>18904430979</text></view>

3.2.2、rich-text

富文本组件
支持把html字符串渲染成wxml结构

需要将html代码写到nodes属性内

<rich-text nodes="<h1 style='color:red;'>行内html</h1>"></rich-text>

3.3、表单组件

3.3.1、button

按钮组件
size ：mini小按钮，会靠左显示，默认会独占一行

plain：镂空，背景色透明

<button type="primary" size="mini">确定</button>

type属性，居中显示

<!-- 背景灰色，文字绿色 -->
<button type="default">确定</button>
<!-- 背景绿色，文字白色 -->
<button type="primary">确定</button>
<!-- 背景灰色，文字红色 -->
<button type="warn">确定</button>

功能比html按钮丰富
通过open-type属性可以调用微信提供的各种功能。获取用户信息、转发、获取用户授权等

3.3.2、image

图片组件
默认宽度300px，高度240px
mode属性

3.3.3、navigator

导航组件
类似于a标签

3.4、导航组件

3.5、媒体组件

3.6、地图组件

3.7、map地图组件

3.8、canvas画布组件

3.9、开放能力

3.10、无障碍访问

4、API

小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，可以方便的获取用户信息、本地存储、支付功能等
三大分类

4.1、事件监听API

以on开头，用来监听某些事件的触发
举例：wx.onWindowResize(function callback)监听创库尺寸变化的事件

4.2、同步API

以sync结尾的API
同步还行结果，可以通过函数返回值直接获取，如果异常，则抛出异常
wx.setStorageSync('key','value')向本地存储中写入内容

4.3、异步API

类似于jquery的$.ajax(option)函数，需要通过success、fail、complete接收调用的结果。
举例：wx.request()发起网络数据请求，通过success回调函数接收数据。

三、模板与配置

1、数据绑定

在data中定义数据

data: {
    // 字符串类型的数据
    info:"Hello World",
    imgSrc:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
    randomNumber:Math.random().toFixed(1)*10, // 10以内的随机数，toFixed小数位
    // 数组类型的数据
    msgList:[{"msg":"hello"},{"msg":"world"}]
  },

在wxml中使用数据（Mustache语法，双大括号）
Mustache语法
- 绑定内容
- 绑定属性
- 运算（比如三元运算）

<view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>
<view>{{randomNumber}} ：  {{randomNumber>5?"大于5":"小于等于5"}}</view>
<view>{{randomNumber*10}}</view>

2、事件绑定

事件是渲染层（wxml）到逻辑层（js）的通讯方式。

常用属性

类型	绑定方式	描述
tap	bindtap或bind:tap	手腹膜后离开事件，相当于click
input	bindinput或bind:input	输入
change	bindchange或bind:change	状态改变事件，必须选择框

事件的属性列表（标红的为重点）
target与currentTarget区别!

代码

 <button type="primary" bindtap="onTap">点我</button>
<!-- 参数传值 用data-XX XX 为参数名 -->
<button type="primary" bindtap="onTap" data-add="{{5}}" id="myMain">点我</button>

onTap(e){
    console.log(e)
    // 给data中的count变量进行计算
    this.setData({
      count:this.data.count + e.target.dataset.add // 获取参数add
    })
  },

2.1、input 文本框与data之间数据同步

<input value='{{info}}' bindinput="onInput"/>

input{
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
border-radius: 10px;
}

onInput(e){
  console.log(e)
  this.setData({
    info:e.detail.value
  })
},

2.2、wx:if 条件选择

wx:if 、 wxelif、 wxelse
可以使用 hidden 隐藏该标签<input value='{{info}}' bindinput="onInput" hidden/>，也可以添加条件hidden="condition"
wx:if 与 hidden 区别
- wx:if 是动态创建和移除元素的
- hidden：以切换样式（display:none/block）的方式，控制元素的显示与隐藏。
- 使用建议：频繁切换时使用hidden，复杂条件判断时用wx:if
== 只比较值，===连类型一起比较三个等号时，data中的sex应写为sex:1,而不能写成sex:"1"
block只是一个块级包含元素，无任何意义，不会被前端渲染出来。只仅仅是一次性控制多个元素

<block wx:if="{{sex===1}}">
    <view>性别：<text>男</text></view>
</block>
<block wx:elif="{{sex===2}}">
    <view>性别：<text>女</text></view>
</block>
<block wx:else>
    <view>性别：<text>保密</text></view>
</block>

2.3、wx:for、wx:key

列表

为了提高渲染效率，建议指定wx:key

<view wx:for="{{fruits}}" wx:key="index" >
    索引是：{{index}}，数据是：{{item}}
</view>

<view wx:for="{{msgList}}" wx:key="id">
    索引是：{{index}}，数据是：{{item.id}}:{{item.msg}}
</view>

fruits:["香蕉","苹果","西瓜","猕猴桃"],
// 数组类型的数据
msgList:[{id:10,"msg":"hello"},{id:11,"msg":"world"}],

也可以使用wx:for-index指定当前循环项的索引名

也可以使用wx:for-item指定当前循环项的变量名，比如双层循环时

<view wx:for="{{fruits}}" wx:for-index="idx" wx:key="idx" wx:for-item="itemName">
    {{idx}}: {{itemName}}
</view>

3、微信模板样式

wxss具有css大部分特性，但是进行了扩充。
扩充特性：rpx 尺寸单位和@import样式导入

3.1、rpx

responsive pixel ：微信独有的，用来解决屏幕适配的尺寸范围。
rpx把所有设备的屏幕在宽度上平分为750份，即750rpx就是整个屏幕的宽度。在较小的屏幕上，小设备1个rpx比较小。底层会自动渲染为px像素单位。
举例：比如iPhone6，屏幕宽度为375px，375px = 750rpx = 750物理像素。那换算后，1rpx=0.5px=1物理像素
官方建议用iphone来作为视觉稿的标准 1px=2rpx

3.2、@import

可以导入外联的样式表
根据权重决定，权重一样，匹配就近原则。

4、全局配置

app.json
- pages:所有页面的存放路径
- window：全局窗口的外观
- tabBar：底部或顶部tab
- style：是否启用新版的组件样式
xx.json

4.1、window

属性名	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景
navigationBarTitleText	string	字符串	导航栏文字内容
navigationBarTextStyle	string	white	导航栏颜色，仅支持while/black
backgroundTextStyle	string	dark	下拉loading的样式，仅支持dark/light
backgroundColor	HexColor	#ffffff	下拉的背景色
enablePullDownRefresh	boolean	false	是否开启全局下拉刷新
onReachBottomDistance	number	50	页面触底距离，单位为px

4.2、注意点

不建议全局配置enablePullDownRefresh，一般只有list才需要下拉刷新功能。

5、tabBar

底部和顶部，但是顶部不支持图标icon
配置项最少2个，最多5个
6个属性
- backgroundColor：背景色
- selectedIconPath：选中时图片路径
- borderStyle：边框颜色
- iconPath：未选中时图片路径
- selectedColor：选中时文字的颜色
- color：tab文字上的颜色（未选中）

代码

注意：导航的三个页面必须放在最前面

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/index2/index2",
    "pages/index/index"  
  ],
  "window": {
    "backgroundTextStyle": "light",
    "backgroundColor": "#ffffff",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "onReachBottomDistance": 0
  },
  "style": "v2",
  "tabBar": {  
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tab1-n.png",
      "selectedIconPath": "/images/tab1-y.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tab2-n.png",
      "selectedIconPath": "/images/tab2-y.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tab3-n.png",
      "selectedIconPath": "/images/tab3-y.png"
    }]
  },
  "sitemapLocation": "sitemap.json"
}

6、网络请求

6.1、两个限制

处于安全考虑，小程序官方对请求作出如下两个限制
- 只能请求https类型的接口，因为http是明文输出，而https则是加密输出。
- 必须将接口的域名添加到信任列表中

6.2、配置合法域名

登录微信小程序管理后台 → 开发管理 → 开发设置 → 服务器域名 → （第一次点开始配置）修改request域名

注意事项

域名只支持https协议，https://www.escook.cn/api/get
域名不能使用ip地址或者localhost
域名必须icp备案

服务器域名一个月内最多可修改5次

getWeatherForecast(){
    wx.request({
      // 请求的接口地址，必须基于https协议
      url: 'https://www.escook.cn/api/get',
      method:'GET', // 请求方式
      // 请求的数据
      data:{
        age:22,
        lastName:'Tom'
      },
      success:(res)=>{
        console.log(res.data.data)
      }
    })
  },

跳过request合法域名的校验，可以支持http协议。
在微信开发者工具中，临时开启开发环境不校验请求域名、TSL版本及HTTPS证书，只是在开发和设计阶段有效。
跨域问题不存在微信小程序中。

posted @ 2022-10-02 07:17 his365 阅读(308) 评论(0) 编辑收藏举报

刷新页面返回顶部

his365

微信小程序

微信小程序

一、代码的构成

1、目录介绍

2、JSON配置文件

2.1、作用

2.2、四种配置文件

3、页面

4、WXML

5、WXSS

6、js文件

7、快捷键

二、宿主环境

1、什么是宿主环境

2、小程序的宿主环境

3、宿主环境包含的内容

1、通信模型

2、运行机制

2.1、小程序启动过程

2.2、页面的渲染过程

3、组件

3.1、视图容器

3.1.1、view

3.1.2、scroll-view

3.1.3、swipe和swipe-item

3.2、基础内容

3.2.1、text

3.2.2、rich-text

3.3、表单组件

3.3.1、button

3.3.2、image

3.3.3、navigator

3.4、导航组件

3.5、媒体组件

3.6、地图组件

3.7、map地图组件

3.8、canvas画布组件

3.9、开放能力

3.10、无障碍访问

4、API

4.1、事件监听API

4.2、同步API

4.3、异步API

三、模板与配置

1、数据绑定

2、事件绑定

2.1、input 文本框与data之间数据同步

2.2、wx:if 条件选择

2.3、wx:for、wx:key

3、微信模板样式

3.1、rpx

3.2、@import

4、全局配置

4.1、window

4.2、注意点

5、tabBar

6、网络请求

6.1、两个限制

6.2、配置合法域名

公告