企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

微信小程序入门教程实例讲解

JavaScript笔记 码云 147℃ 0评论
目录
[隐藏]

微信小程序入门教程实例讲解

最近公司突然需要做一个保险方面的小程序让,之前一直没有机会实践得我,这次得以大展身手。之前的理论好多也是在网上收集学到的,现在拿上台面上用,充满了挑战,其中遇到好多技术方面的坑,但这不是主要的,最让我开心的是一个项目下来学到了好多东西,今天我自己整理一下关于小程序的入门教程,将我的经验和心得分享给大家,希望对大家有所帮助。

1、开发环境

微信小程序开发工具点击下载

安装之后,和微信web开发者工具一样,扫码登录即可,不同的是,创建一个小程序需要填写AppID,如果没有AppID的话,点击‘无AppID’即可

小程序入门教程实例讲解

2、目录结构

目录结构

一个小程序由两部分组成:框架主体部分、框架页面部分

框架主体部分

框架主体部分包含三个文件,位于项目的根目录

1)app.js

//app.js//app.js

App({

  onLaunch: function () {

    // 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)

    // 调用API从本地缓存中获取数据

    var logs = wx.getStorageSync('logs') || []

    logs.unshift(Date.now())

    wx.setStorageSync('logs', logs)

  },

  onShow: function() {

      // 当小程序启动,或从后台进入前台显示,会触发 onShow

  },

  onHide: function() {

      // 当小程序从前台进入后台,会触发 onHide

  },

  getUserInfo:function(cb){

    var that = this

    if(this.globalData.userInfo){

      typeof cb == "function" && cb(this.globalData.userInfo)

    }else{

      //调用登录接口

      wx.login({

        success: function () {

          wx.getUserInfo({

            success: function (res) {

              that.globalData.userInfo = res.userInfo

              typeof cb == "function" && cb(that.globalData.userInfo)

            }

          })

        }

      })

    }

  },

  globalData:{

    userInfo:null

  }

})

app.js内调用了App函数(只能在app.js内调用)注册小程序实例,可以在这个文件中监听处理小程序的声明周期函数,并可以在此声明全局变量。

小程序提供了全局方法getApp返回小程序实例

var app = getApp()

console.log(app.globalData) // {userInfo:null}

此外,还提供了getCurrentPage方法获取当前页面的实例,getCurrentPage不能在onLaunch中调用,此时page尚未生成

2)app.json

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  },

  "tabBar": {

    "list": [{

      "pagePath": "page/index/index",

      "text": "首页"

    }, {

      "pagePath": "page/logs/logs",

      "text": "日志"

    }]

  },

  "networkTimeout": {

    "request": 10000,

    "downloadFile": 10000

  },

  "debug": true

}

此文件用来对小程序进行全局配置(app.json不得含有注释)

  • pages配置页面路由,所有需要使用的页面都需要添加配置
  • window设置页面窗口表现
  • tabBar设置页面底部tab表现,其中list数组长度不超过5且至少为2
  • networkTimeout设置网络超时时间
  • debug设置debug模式的开启

3)app.wxss样式表

/**app.wxss**/

.container {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  padding: 200rpx 0;

  box-sizing: border-box;

} 

框架页面部分

框架页面部分

框架页面部分包含四个文件

page.js,page.json分别对应于app.js和app.json,不同之处在于page.js中调用的是Page函数,page.json中只能对本页的window进行配置,因此,page.json中直接就是一个对象

{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

}

然后再看看page.js

// page.js

Page({

  data: { 

   // 页面的初始数据

    text: "This is page data."

  },

  onLoad: function(options) {

    // 页面加载时

  },

  onReady: function() {

    // 页面渲染完成时

  },

  onShow: function() {

    // 页面显示时

  },

  onHide: function() {

    // 页面隐藏时

  },

  onUnload: function() {

    // 页面卸载时

  },

  // 自定义属性,使用this方法

  viewTap: function() {

    this.setData({

      text: 'Set some data for updating view.'

    })

  }

})

3、WXML组件

小程序中并没有html标签,而是提供了一系列WXML组件

  • view视图容器
  • scroll-view可滚动视图容器
  • swiper滑块视图容器
  • icon图标
  • texttext
  • progressprogress
  • buttonbutton
  • checkbox-group多项选择器,内部由多个checkbox组成
  • checkbox多选项目
  • formform
  • inputinput
  • labellabel
  • picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器
  • radio-group单项选择器,内部由多个组成
  • radio单选项目
  • slider滑动选择器
  • switch开关选择器
  • action-sheetaction-sheet
  • modal模态弹窗
  • toast消息提示框
  • loading加载提示符
  • navigator页面链接
  • audioaudio
  • imageimage
  • video视频
  • map地图
  • canvas画布

这应该是类似于ng中的组件,目前小程序并没有提供自定义组件的功能

4、WXSS

WXSS用于描述WXML的样式表

为了适应各种屏幕,WXSS扩展了尺寸单位rpx(responsivepixel),规定屏幕宽度为750rpx(20rem)

另外,WXSS并不支持所有css选择器,目前支持的选择器有

  • .class
  • #id
  • element
  • element,element
  • :after
  • :before

5、数据绑定

数据绑定采用“Mustache”语法(双大括号)包裹变量

<!--index.wxml-->

<view class="container">

  <text>{{hello}}</text>

</view>

 

//index.js//index.js

Page({

  data: {

    hello: 'Hello World'

  },

  onLoad: function () {

    this.setData({

      hello:'Hello World'

    })

  }

})

WXML中的动态数据均来自对应Page的data,并且需要调用setData方法通知视图数据变化

6、条件渲染

使用wx:if=”{{condition}}”来判断是否需要渲染该代码块,同大多MV*框架一样,if是惰性的,即初始判断为false时,不会渲染该代码块

<view wx:if="{{condition}}"> True </view>

7、列表渲染

使用wx:for绑定一个数组,wx:for-index可以指定数组当前下标的变量名(默认为index),wx:for-item可以指定数组当前元素的变量名(默认为item)

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">

  {{idx}}: {{itemName.message}}

</view>

8、模版

使用name属性定义一个stemplate模版,模版拥有自己的作用域

<template name="msgItem">

  <view>

    <text> {{index}}: {{msg}} </text>

    <text> Time: {{time}} </text>

  </view>

</template>

使用name属性使用一个 stemplate 模版,data属性传入模版所需的数据

data

Page({

  data: {

    item: {

      index: 0,

      msg: 'this is a template',

      time: '2016-09-15'

    }

  }

})

9、事件

支持事件

  • touchstart手指触摸
  • touchmove手指触摸后移动
  • touchcancel手指触摸动作被打断,如来电提醒,弹窗
  • touchend手指触摸动作结束
  • tap手指触摸后离开
  • longtap手指触摸后,超过350ms再离开

事件绑定

以key-value形式绑定事件

其中key为bind或catch+事件名称,例如bindtap=“tapName”(bind不阻止冒泡,catch阻止事件向上冒泡)

value为函数名称

事件对象

  • type事件类型
  • timeStamp事件生成时的时间戳
  • target触发事件的组件的一些属性值集合id、dataset、offsetLeft,、offsetTop
  • currentTarget当前组件的一些属性值集合id、dataset、offsetLeft,、offsetTop
  • touches触摸事件,触摸点信息的数组pageX、pageY、clientX、clientY、screenX、screenY
  • detail特殊事件所携带的数据,如表单组件的提交事件会携带用户的输入

10、引用

WXML提供两种文件引用方式import和include

import可以在该文件中使用目标文件定义的template,但不能使用目标文件中import的其他template

// index.wxml

<import src="item.wxml"/>

<template is="item" data="{{text: 'forbar'}}"/>

include可以将目标文件中除了

<!-- index.wxml -->

<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

<!-- header.wxml -->

<view> header </view>

<!-- footer.wxml -->

<view> footer </view>

11、路由传参

一个url如下

<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>

在目标页的声明周期函数onLoad中传入options即可获取路由参数对象,另外url是相对的,不是app.json中定义的url

Page({

  onLoad: function(options) {

    this.setData({

      title: options.title

    })

  }

})

12、API

框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等,具体可查看官方文档

13.TodoList

  • 最后是一个案例
  • 显示任务
  • 添加任务
  • 删除任务
  • 标记任务是否完成
  • 计算任务总数和已完成的任务数量

index.wxml

<!--index.wxml-->

<view class="input">

  <input bindinput="bindKeyInput" placeholder="请输入任务名称" value="{{inputValue}}"/>

  <button bindtap="add">确定</button>

</view>

<view class="list">

  <block wx:for="{{list}}">

    <view>

      <checkbox-group bindchange="change" data-index="{{index}}">

        <checkbox value="{{item.checked}}"checked="{{item.checked}}" />

      </checkbox-group>

      <text>{{item.value}}</text><button bindtap="delete" data-index="{{index}}">删除</button>

    </view>

  </block>

  <view>

    {{complete}}个已完成/{{list.length}}个任务

  </view>

</view>

其中block并不属于组件,不会在页面中渲染,仅作接收控制属性用

index. wxss
/**index.wxss**/

.input {

    padding: 20 rpx

}

.list view {

    padding: 10 rpx 20 rpx;

    overflow: hidden

}

.list view text {

    display: inline - block;

    line - height: 92 rpx

}

.list view button {

    width: 200 rpx;

    display: inline - block;

    float: right

}
index.js
//index.js

Page({

  data: {

    list:[],

    complete:0

  },

  bindKeyInput:function(e){

    this.setData({

      inputValue:e.detail.value

    })

  },

  add:function(){

    var list = this.data.list;

    list.push({checked:false,value:this.data.inputValue});

    this.setData({

      list:list,

      inputValue:''

    })

  },

  delete:function(e){

    var list = this.data.list;

    list.splice(e.target.dataset.index,1)

    this.setData({

      list:list

    })

    this.com_task()

  },

  change:function(e){

    console.log(e.detail.value[0])

    var list = this.data.list;

    list[e.target.dataset.index].checked = !!e.detail.value[0]

    this.setData({

      list:list

    })

    this.com_task()

  },

  com_task:function(){

    var complete = 0,list = this.data.list;

    for(var i=0,len=list.length;i<len;i++){

      console.log(list[i].checked)

      if(list[i].checked!=false){

        complete++

      }

    }

    this.setData({

      complete:complete

    })

  }

})

list为任务列表,complete为已完成的任务数量

页面展示效果如下:

微信小程序入门教程实例讲解

以上就是关于微信小程序入门教程及实例讲解的全部内容,也欢迎大家留言提出指正。

转载请注明:码云笔记 » 微信小程序入门教程实例讲解

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址