微信小程序开发入门

1.wxml
2.wxss
3.wxs
wxs是微信小程序自身的脚本语言，用来过滤和计算。wxs可以通过文件可模块标签来定义，文件需要.wxs后缀文件
wxs是专门用于wxml页面的，如果你有在页面中使用js脚本的需求可以使用，但是wxs是不能被其它js文件引用的
实际开发应该根据情况，选择使用js或wxs，但本人的绝大部分开发都是用js中完成的

三、小程序生命周期

1、注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、
错误监听和页面不存在监听函数等

1、创建App实例，小程序生命周期函数

  App({
     onLaunch (options) {//监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
       // Do something initial when launch.
     },
     onShow (options) {//监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShow
       // Do something when show.
     },
     onHide () {//监听小程序隐藏 当小程序从前台进入后台，会触发 onHide
       // Do something when hide.
     },
     onError (msg) {//错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
       console.log(msg)
     },
     globalData: 'I am global data'
   })

注1：与SPA项目的比较
1.相当于SPA项目中的main.js中定义全局Vue对象,
2.onLaunch/onShow/onHide/onError就相当于钩子函数
注2：其他开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

2.页面共享

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法
获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

     // xxx.js  var  let  const  定义常量
     const appInstance = getApp()
     appInstance = .....    //  XXXXX
     console.log(appInstance.globalData) // I am global data

3.注册页面

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等
简单的页面可以使用Page(Object object)构造器进行构造。

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

  Page({
     data: {//页面第一次渲染使用的初始数据
       text: "This is page data."
     },
     onLoad: function (options) {//监听页面加载
       console.log("page ---onLoad---");
     },
     onReady: function () {//监听页面初次渲染完成
       console.log("page ---onReady---");
     },
     onShow: function () {//监听页面显示
       console.log("page ---onShow---");
     },
     onHide: function () {//监听页面隐藏
       console.log("page ---onHide---");
     },
     onUnload: function () {//监听页面卸载
       console.log("page ---onUnload---");
     }
   })

调用方法的顺序：

其中，打开小程序后会依次执行onLoad，onShow和onReady方法
前后台切换会分别执行onHide和onShow方法，
当小程序页面销毁时会执行onUnload方法

问题1：

如何让让多个页面有相同的数据字段和方法(bindInput)？在页面中使用 behaviors(vue中无此功能）

     module.exports = Behavior({
          data: {
            sharedText: 'This is a piece of data shared between pages.111'
          },
          methods: {
            sharedMethod: function() {
              return "This is a piece of data shared between pages.222";
            }
          }
        })

        // page-a.js
        var myBehavior = require('./my-behavior.js')
        Page({
          behaviors: [myBehavior],
          onLoad: function() {
            console.log(this.data.sharedText)//继承属性及方法的调用
            console.log(this.sharedMethod())
          }
        })

问题2：

Page构造器适用于简单的页面。但对于复杂的页面使用 Component 构造器构造页面
omponent 构造器的主要区别是：方法需要放在 methods: { } 里面

   Component({
          data: {
            text: "This is page data."
          },
          methods: {
            onLoad: function(options) {
              // 页面创建时执行
            },
            onPullDownRefresh: function() {
              // 下拉刷新时执行
            },
            // 事件响应函数
            viewTap: function() {
              // ...
            }
          }
        })

注意：

“不要在vscode中创建页面，微信开发者工具不会进行编译，在app.json的pages添加ctrl+s即可”

四、小程序配置

1.全局配置文件(重要)

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、
窗口表现、设置网络超时时间、设置多 tab 等
-tabbar(最少2个分栏)
演示示例：首页、购物车、我的
-pages
演示示例：小程序标题、页面标题文字
-window

2.sitemap.json

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

五、页面路由

在小程序中所有页面的路由全部由框架进行管理。
框架以栈的形式维护了当前的所有页面。

1.当发生路由切换的时候，页面栈的表现如下

路由方式页面栈表现
初始化新页面入栈
打开新页面新页面入栈
页面重定向当前页面出栈，新页面入栈
页面返回页面不断出栈，直到目标返回页
Tab 切换页面全部出栈，只留下新的 Tab 页面
重加载页面全部出栈，只留下新的页面
开发者可以使用 getCurrentPages() 函数获取当前页面栈。

2.路由方式

对于路由的触发方式以及页面生命周期函数具体详情见官网文档

注1：栈是一个先进后出的数据结构(子弹夹)
注2：演示如何指定页面启动(重要)
1.修改路由配置
2.添加启动配置，指定启动页面

六、微信小程序事件绑定(重要)

1.事件类别：

tap：点击事件
input：输入事件
longtap：长按事件；
touchstart：触摸开始；
touchend：触摸结束；
touchcansce：取消触摸；

注1：小程序中请求处理方法是不能传递参数，正确方式：通过data-xxx属性传递参数，再通过事件源获得参数

错误
<button bindtap="handletap(-1)"
正确
<button bindtap="handletap" data-number="{{-1}}"

正解：传递固定值-1
data-number="{{-1}}"
还可以绑值
data-number="{{n}}"

再从事件对象中获取
e.currentTarget.dataset.number

注2：在微信小程序中，js的数据和前端显示的数据是单数据流。
即js里边的数据变了，前端能立刻显示，但如果前端数据变了，js不能改变，怎么办呢

我们可以通过bindinput方法，来实现双向数据绑定。

原理：我们使用bindinput事件来获取input的输入值，然后根据dataset获取要跟 data数组里的对象进行数据绑定
具体写法

1.在data中定义dataList属性，并在其中定义要双向绑定的属性名
2.定义bindInput方法
3.<input class="input" bindinput="bindInput" data-name="username" placeholder="请输入帐号" auto-focus/>
bindInput(e) {
console.log("bindInput");
//debugger
// 表单双向数据绑定
var that = this;
var dataset = e.target.dataset;
// data-开头的是自定义属性，可以通过dataset获取到，dataset是一个json对象
var name = dataset.name;
var value = e.detail.value;

问题：
//小问题：规则接收数据属性只能叫dataList
that.data.dataList[name] = value; //逻辑层数据的更改
// 拼接对象属性名，用于为对象属性赋值
var attributeName = "dataList." + name;
that.setData({//视图层数据的更改
[attributeName]: value
});
console.log(that.data.dataList);
}

2.事件绑定

bind绑定；
catch绑定；（能阻止事件冒泡）
例如：绑定点击事件 bindtap
page.wxml 文件

3.接收参数

Page({
onLoad: function(options) {
//小程序Data的赋值必须使用setData方法，错误：this.Data.title='xxx';
this.setData({
title: options.title
})
}
})

七、模块化

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块

注1：可参考utils/util.js被logs/logs.js引用
注2：定义模块时建立直接定义一个对象
//common.js
module.exports = {
sayHello: function (name) {
console.log("Hello %s", name);
},
sayGoodbye: function (name) {
console.log("Goodbye %s", name);
}
};

八、API(重要)

小程序开发框架提供丰富的微信原生API，可以方便的调起微信提供的能力，
如获取用户信息，本地存储，支付功能等

1、API的分类：

1.事件监听API
以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen

2.同步 API
以 Sync 结尾的 API 都是同步 API，如 wx.setStorageSync

3.异步 API
大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数，
这个参数都支持按需指定以下字段来接收接口调用结果

九、视图层

1、wxml(重要)

wxml(相当于html)（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构
小程序模板语法
1.数据绑定
2.列表渲染(即循环)
演示示例：block标签的使用(写代码时存在，页面在渲染时则没有任何显示)
3.条件渲染(即if)
演示示例：数据绑定、for、if

4.模板(与vue不同)
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
1.定义模板
<template name="msgItem">...</template>
2.使用模板
<template is="msgItem" data="{{...item}}"/>
5.引用
WXML 提供两种文件引用方式import和include

注1：有vue经验掌握此内容非常容易^_^

2、WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比，WXSS 扩展的特性有：
尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

样式导入

3、WXS(略，不重要)

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构

十、实战

开发一个登录的小程序（不与后端进行交互）

1、先看效果：

2、编写login.wxml

<view class="container">
   <view>
      <image src="/assets/a.webp"></image>
   </view>
   <form bind:submit="aa"  bind:reset="bb">
      <label>用户名：</label>
      <input value="{{user.username}}" bind:input="bindName" type="text" placeholder="请输入用户名" />
      <label>密码：</label>
      <input value="{{user.password}}" bind:input="bindpwd"  password="{{true}}" placeholder="请输入密码" />
      <label></label>
   <view>   
      <button form-type="submit" type="primary">登录</button>
      <button form-type="reset" type="primary">清空</button>
      <button type="warn" bindtap="upTab">注册</button>
      <!-- <navigator open-type="navigateTo" url="/regiest/regiest">注册</navigator> -->
   </view>
</form>
   <view>
       {{user.username}} 
       {{user.password}} 
   </view>
</view>

3、编写login.js

Page({
    data: {
        msg: "hello world",
        user: {
            username: "",
            password: ""
        }
    },
    bindName(e) {
        // console.log(arguments)
        //数据双向绑定
        this.setData({
        "user.username":e.detail.value
        })        
        console.log(this.data.user)
    },
    bindpwd(e) {
        this.setData({
            "user.password":e.detail.value
            })    
    },
    aa() {
        wx.showToast({
            title: 'title',
            icon: "successful"
        }),
         this.setData({
            "user.username" : "",
            "user.password" : ""
        })
    },
    bb() {
        this.setData({
            "user.username" : "",
            "user.password" : ""
        })
    },
    upTab(){
        wx.redirectTo({
          url: '/pages/regiest/regiest',
        })
    }
})

4、调整页面顺序

{
  "pages": [
    "pages/login/login",
    "pages/other/other",
    "pages/index/index",
    "pages/logs/logs",
    "pages/regiest/regiest"



  ],

整个小程序(不与后端进行交互)就已经开发完毕了

今天的知识就已经分享到这了，希望能够版帮助到你！

落日飞行

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发入门

一、二、
复制链接

扫一扫

专栏目录