微信小程序开发必备知识点_open-type

微信小程序开发基础

---

前言

从json、wxml、wxss、js四个方面总结一下小程序开发工程中的基础知识点。

---

学习笔记，欢迎指正。

一、页面组件（WXML）

WeiXin Markup Language

1.<view>标签用于定义视图容器与<div>类似。

2.<text>文本标签，行内元素类似span。可以嵌套一个<text>比如一段文本中某些字体颜色要变。1.也可以写入文本但是它没有换行效果。

3.<input>输入框。input组件显示为空白，因为默认样式没有边框，单击input组件光标闪烁即可输入。它有四个属性，默认text输入的是文本，弹出标准键盘。<input type="number"/>表示在单击输入框时下方弹出输入数字的键盘。

4.swiper滑块视图容器，主要用于轮播图。默认大小：宽度100% 高度是150px 需要自定义设置大小。其中只可放置swiper-item组件。属性详情参见开发者文档

5.scroll-view:可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

6.icon:图标。组件属性的长度单位默认为px。<icon type="success" size="93"></icon>即是一个绿底白勾的圆形通过符号。更多type

7.progress:进度条，更多可参考开发者文档。组件属性的长度单位默认为px。<progress percent="20" show-info stroke-width="3"/>
8.
9.<button>按钮</button>button属于表单组件

<button size ="mini" type='primary'>按钮</button>
1

type属性在开发者文档里解释为颜色

<button open-type="share">转发按钮</button>
1

open-type属性是指微信开放能力，包括转发、获取用户信息、获取手机号、打开app之类的。

10.导航
navigator：页面链接 页面跳转 <navigator url='页面路径'></navigator>
open-type属性 的合法值有如下：
（1）navigate:默认跳转方式。保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
（2）redirect:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
（3）switchTab:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
（4）reLaunch:关闭所有页面，打开到应用内的某个页面。
（5）navigateBack:关闭当前页面，返回上一页面。
（6）exit:退出小程序，同时在标签里加上target="miniProgram"时生效。

---

二、小程序配置（json）

1. 全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
详细配置文档
1.pages页面路径

2.window窗口：用于设置小程序的状态栏、导航条、标题、窗口背景色。文档挺详细的不赘述。（window的background是要下拉才能看见的颜色。）

3.style：微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 “style”: "v2"可表明启用新版的组件样式。

4.tabBar配置:窗口的底部或顶部有 tab 栏可以切换页面。
如图:

2. 页面配置

直接就用{}在json文件里写属性和值就是了，全局配置的window里面的属性都包含(此时不用写”window“:{}直接{}写属性)。比较常用的时pages页面路径那张图的windows组件花括号里的几个。

json里面不能写注释
json还不能调用云开发的图片

3. sitemap 配置

用的不多看文档吧。

---

三、小程序配置（WXSS）

  WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
  WXSS 用来决定 WXML 的组件应该怎么显示。
  为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：
尺寸单位
rpx（responsive pixel响应式像素 ）: 移动端网页像素单位的换算难点在于它有物理像素和逻辑像素两种单位。物理像素是指屏幕实际上有多少个像素，而逻辑像素是指CSS中使用的像素单位。为了方便开发人员适配各种手机屏幕，微信小程序在wxss中加入了新的尺寸单位rpx。为了方便换算rpx单位，规定任何手机屏幕宽度为750rpx。
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

---

四、逻辑层（js）

1. 啥是逻辑层？

整个小程序的框架分为逻辑层（JavaScript）和渲染层（视图层(wxml,wxss)）。逻辑层用来处理数据，渲染层再把数据显示在界面上。小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。

2. app.js的App方法

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，他接受一个参数，通过参数指定生命周期回调、错误监听和页面不存在监听等。若要在小程序启动、显示、隐藏时执行某些操作，可以通过App()函数来实现。App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。 可以通过getApp方法获取全局唯一App实列，获取App上的数据或调用App上的函数。app.js里·还有一个全局变量globalData:{}

3. pages.js页面逻辑

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册。内容包括：

• data变量指定页面的初始数据
• 生命周期(从创建到销毁)回调函数，小程序自动创建
• 自定义函数
• 事件处理函数等

4. 数据绑定

WXML 中的动态数据均来自对应 Page 的 data。数据绑定就是把data里的数据放到wxml上。
先在js里写上

Page({
  data: {
    message: 'Mustache',
    id:0
  }})
1
2
3
4
5

然后wxml上写

<view> {{ message }} </view>
<view id="item-{{id}}"> </view>
1
2

页面显示就是：
Mustache

5. 列表渲染(循环)

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
wxml里：

<view wx:for="{{array}}">
{{index}}: {{item}}</view>
1
2

js文件里：

Page({
  data: {
    array: [
     '这个博主',
     '真的帅']
  }})
1
2
3
4
5
6

多重循环的时候还需要用到一点：
使用 wx:for-item 可以指定数组当前元素的变量名，

wx:for 也可以嵌套，下边是一个九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
1
2
3
4
5
6

没完，还有个快捷用法将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view></block>
1
2
3

6. 条件渲染(if)

wx:if="" 判断是否需要渲染该代码块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
1
2
3

这里也可以用block控制多个标签。

7. 事件绑定

在组件中绑定一个事件处理函数。
最常用的bindtap，当用户点击该组件的时候会在该页面对应的js文件里的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
1

在相应的Page定义中写上相应的事件处理函数，参数是e。

Page({
  tapName: function(e) {
    console.log(e)
  }})
1
2
3
4

这是一个简单的基于云开发的微信小程序校园二手交易和失物招领https://gitee.com/hitberlin/we-chat感兴趣的可以下载练练手。