微信小程序开发(一)入门

微信小程序开发

代码项目结构

  • pages用来存放所有小程序的页面
  • utils存放工具性质的模块
  • app.js 小程序项目的入口文件
  • app.json 小程序项目的全局配置文件
  • app.wxss 小程序项目的全局样式文件
  • project.config.json 项目的配置文件
  • sitemap.json 用来配置小程序及其页面是否允许被微信索引

小程序页面的组成部分

  • .js 页面的脚本文件,存放页面的数据,事件处理函数等
  • .json 当前页面的配置文件,配置窗口的外观、表现等
  • .wxml 页面的模板结构文件
  • .wxss 当前页面的样式表文件
JSON配置文件
app.json

当前小程序的全局配置

  • pages 用来记录当前小程序所有页面的路径
  • window 全局定义小程序所有页面的背景色、文字颜色等
  • style 全局定义小程序组件所使用的样式版本
project.config.json

是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置

  • setting 中保存了编译相关的配置
  • projectname 项目名称
  • appid 小程序的账号ID

小程序中的每一个页面,可以使用.json文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项

sitemap.json

微信现已经开放小程序内搜索,效果类似于PC网页的SEO,sitemap.json文件用来配置小程序页面是否允许微信索引。

sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件project.config.json 的 setting 中配置字段 checkSiteMap 为 false

新建小程序页面

只需要在app.json -> pages中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件

修改项目首页

只需要调整app.json -> pages数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面当作页面进行渲染。

JS文件
app.js
  • 是整个小程序项目的入口文件,通过调用App()函数来启动整个小程序
页面的.js文件
  • 是页面的入口文件,通过调用Page()函数来创建并运行页面
普通的.js文件
  • 是普通的功能模块文件,用来封装公共的函数或者属性供页面使用

小程序的代码构成

wxml
  1. 类似于html,但是也有诸多不同
    • 标签名称不同
    • 属性节点不同
    • 提供了类似于Vue中的模板语法
wxss
  1. 类似于css,但也有不同
    • 新增了rpx尺寸单位
    • 提供了全局的样式和局部样式
    • wxss仅支持部分css选择器
      • .class
      • id

      • 并集选择器,后代选择器
      • ::after 和 ::before 等伪类选择器
页面渲染的过程
  1. 加载页面的.json配置文件
  2. 加载页面的.wxml模板和.wxss样式
  3. 执行页面的.js文件,调用Page()创建页面实例
  4. 页面渲染完成

小程序的宿主环境

通信模型

小程序中通信的主体是渲染层和逻辑层

其中

  • WXML模板和WXSS样式工作在渲染层
  • JS脚本工作在逻辑层

渲染层和逻辑层之间的通信由微信客户端进行转发

逻辑层和第三方服务器之间的通信由微信客户端进行转发

小程序的启动过程
  1. 把小程序的代码包下载到本地
  2. 解析app.json全局配置文件
  3. 执行app.js小程序入口文件,调用App()创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成

组件

常用视图容器类组件
view
  • 普通视图区域

  • 类似于HTML的div,是块级元素

  • 常用来实现页面的布局效果

  • 示例

    
      A
      B
      C
    
    .container1{
      display: flex;
      justify-content: space-around;
    }
    .container1 view{
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
    .container1 view:nth-child(1){
      background-color: rgb(102, 170, 147);
    }
    .container1 view:nth-child(2){
      background-color: rgb(126, 126, 103);
    }
    .container1 view:nth-child(3){
      background-color: rgb(136, 231, 235);
    }
    
scroll-view
  • 可滚动的视图区域

  • 常用来实现滚动列表效果

  • 示例

    
      A
      B
      C
    
    
    .scroller1{
      height: 120px;
      display: block;
      justify-content: space-around;
    }
    .scroller1 view{
      width: 40px;
      height: 150px;
      text-align: center;
      line-height: 100px;
    }
    .scroller1 view:nth-child(1){
      background-color: rgb(102, 170, 147);
    }
    .scroller1 view:nth-child(2){
      background-color: rgb(126, 126, 103);
    }
    .scroller1 view:nth-child(3){
      background-color: rgb(136, 231, 235);
    }
swiper和swiper-item
  • 轮播图容器组件和轮播图item组件

  • 示例

     
      
      A
      
      
      B
      
      
      C
      
    
    .mySwiper{
      height: 120px;
    }
    .item{
      height: 100%;
      line-height: 100px;
      text-align: center;
    }
    swiper-item:nth-child(1){
      background-color: cadetblue;
    }
    swiper-item:nth-child(2){
      background-color: rgb(76, 118, 119);
    }
    swiper-item:nth-child(3){
      background-color: rgb(25, 81, 83);
    }
常用基础内容组件
text
  • 文本组件

  • 类似于html的span标签,是一个行内元素

  • 通过selectable属性可以实现长按选中文本内容的效果

  • 示例

    
    长按选中手机号码
    123111111111111111111111111
    
rich-text
  • 富文本组件

  • 支持把html字符串渲染为wxml结构

  • 通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构

    
    124
    
其他常用组件
button
  • 按钮组件

  • 功能比HTML中的button丰富

  • 通过open-type属性可以调用微信提供的各种功能(客服,转发,获取用户授权,获取用户信息等)

    -----通过type指定按钮类型------------
    
    
    
    ------mini按钮---------------
    
    ----------plain镂空按钮------------
    
image
  • 图片组件
  • image组件默认宽度约300px,高度约240px
navigator
  • 页面导航组件
  • 类似于html的a标签
API

小程序的API是由宿主环境提供的

事件监听api
  • 以on开头,用来监听某些事件的触发

    wx.onWindowResize(function callback)  // 监听窗口尺寸变化的事件
同步api
  • 以Sync结尾的API都是同步API

  • 同步API的执行结果可以通过函数返回值直接获取,如果执行出错会抛出异常

  • 例如:向本地存储中写入内容

    wx.setStorageSync("key",'value')
异步api
  • 类似于Jquery中的$.ajax(options)函数,需要通过success、fail、complete接收调用的结果
  • 例如:wx.request()发起网络数据请求,通过success回调函数接收数据

WXML模板语法

数据绑定

类似于Vue的双向绑定

在Wxml中通过Mustache语法将data中的数据绑定到页面中渲染

<view class="container1">
    <view>{{data1}}</view>
    <view>{{data2}}</view>
    <view>{{data3}}</view>
</view>

在页面对应的js文件中

Page({
    /**
     * 页面的初始数据
     */
    data: {
        data1: 'hello',
        data2: 'world',
        data3: '!',
        randnum: Math.random()*100
    },
})

属性同样可以使用类似的方式进行绑定

事件绑定

事件是渲染层到逻辑层的通讯方式,通过事件可以将用户在渲染层产生的行为反馈到逻辑层进行业务的处理

小程序中常用的事件
类型 绑定方式 事件描述
tap bindtap或者bind:tap 手指点击后马上离开
input bindinput 或者bind:input 文本框的输入事件
change bindchange 或者 bind:change 状态改变时触发

事件对象的属性值列表

当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示

属性 类型 说明
type String 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
detail Object 额外的信息
touches Array 触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件,当前变化的触摸点信息的数组

target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件

通过调用 this.setData(dataObject)方法,可以给页面中data中的数据重新赋值

<button bindtap="btntapHandler">点击</button>
<text id="number" selectable>{{num}}</text>
btntapHandler(e){
    this.setData({
        num:this.data.num+1
    })
}
Page({
    /**
     * 页面的初始数据
     */
    data: {
        num:0   
    },
})
事件传参

可以为组件提供 data- 自定义属性传参,其中 代表的是参数的名字,示例代码如下

<button bindtap="btntapHandler" data-info="{{2}}">默认按钮</button>

info会被解析为参数名,2会被解析为参数的值

在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值

btntapHandler(e){
    console.log(e)
    console.log(e.target.dataset)
    console.log(e.target.dataset.info)
}

然后就可以利用以上两种方式来通过输入改变渲染的数据了

条件渲染

wx:if
  • data数据 :type
<view wx:if="{{type==1}}">男</view>
<view wx:elif="{{type==2}}">女</view>
<view wx:else>保密</view>
wx:for
<view wx:for="{{array}}" id="viewfor">
    <view >索引是{{index}} 当前项为{{item}}</view>
</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
    索引{{idx}} :{{itemName}}
</view>
wx:key
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

WXSS模板样式

全局样式

定义在app.wxss中的样式为全局样式,作用于每一个页面

局部样式

在页面的.wxss文件中定义的样式为局部样式

全局配置

全局配置文件及其常用的配置项

小程序根目录下的app.json文件是小程序的全局配置文件

常用配置项

pages

记录当前小程序所有页面的存放路径

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 当前页面导航栏背景颜色,如 #000000
navigationBarTextStyle String white 当前页面导航栏标题颜色,仅支持 black / white
navigationBarTitleText String 当前页面导航栏标题文字内容
backgroundColor HexColor #ffffff 当前页面窗口的背景色
backgroundTextStyle String dark 当前页面下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh Boolean false 是否为当前页面开启下拉刷新的效果
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为 px
window

全局设置小程序的外观

属性名 类型 默认值 说明
navigationBarTitleText String 字符串 导航栏标题文字内容
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black / white
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh Boolean false 是否全局开启下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px
tabBar

设置小程序底部的tabBar效果

属性 类型 必填 默认值 描述
position String bottom tabBar 的位置,仅支持 bottom/top
borderStyle String black tabBar 上边框的颜色,仅支持 black/white
color HexColor tab 上文字的默认(未选中)颜色
selectedColor HexColor tab 上的文字选中时的颜色
backgroundColor HexColor tabBar 的背景色
list Array tab 页签的列表, 最少 2 个、最多 5 个 tab

每个tab项的配置选项

属性 类型 必填 描述
pagePath String 页面路径,页面必须在 pages 中预先定义
text String tab 上显示的文字
iconPath String 未选中时的图标路径;当 postion 为 top 时,不显示 icon
selectedIconPath String 选中时的图标路径;当 postion 为 top 时,不显示 icon
style

是否启用新版的组件样式

网络数据请求

出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制:

  • 只能请求 HTTPS 类型的接口

  • 必须将接口的域名添加到信任列表中

  • 域名只支持 https 协议

  • 域名不能使用 IP 地址或 localhost

  • 域名必须经过 ICP 备案

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

发送GET请求

调用微信小程序提供的 wx.request() 方法,可以发起 GET 数据请求

wx.request({
    url: 'https://escook.cn/api/get',
    method:'GET',
    data:{
        name:'bbo',
        age:22
    },
    success:(res)=>{
        console.log(res)
    }
})

发送POST请求

调用微信小程序提供的 wx.request() 方法,可以发起 POST 数据请求

POST请求代码与GET请求很类似,就不再多写了。

发表评论