欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

微信小程序入门教程及实例

发布：2018-01-25 14:38浏览： 次来源：网络 作者：tianshu

目录
  • 开发环境
  • 目录结构
  • WXML组件
  • WXSS
  • 数据绑定
  • 条件渲染
  • 列表渲染
  • 模版
  • 事件
  • 引用
  • 路由传参
  • API
  • 实例TodoList
1.开发环境

开发工具下载（https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html） 
安装之后，和微信web开发者工具一样，扫码登录即可，不同的是，创建一个小程序需要填写AppID，如果没有AppID的话，点击‘无AppID’即可

微信小程序入门教程及实例(图1)

2.目录结构微信小程序入门教程及实例(图2)


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

框架主体部分

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

  1. 1) app.js
  2. //app.js//app.js
  3. App({
  4.   onLaunch: function () {
  5.     // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  6.     // 调用API从本地缓存中获取数据
  7.     var logs = wx.getStorageSync('logs') || []
  8.     logs.unshift(Date.now())
  9.     wx.setStorageSync('logs', logs)
  10.   },
  11.   onShow: function() {
  12.       // 当小程序启动，或从后台进入前台显示，会触发 onShow
  13.   },
  14.   onHide: function() {
  15.       // 当小程序从前台进入后台，会触发 onHide
  16.   },
  17.   getUserInfo:function(cb){
  18.     var that = this
  19.     if(this.globalData.userInfo){
  20.       typeof cb == "function" && cb(this.globalData.userInfo)
  21.     }else{
  22.       //调用登录接口
  23.       wx.login({
  24.         success: function () {
  25.           wx.getUserInfo({
  26.             success: function (res) {
  27.               that.globalData.userInfo = res.userInfo
  28.               typeof cb == "function" && cb(that.globalData.userInfo)
  29.             }
  30.           })
  31.         }
  32.       })
  33.     }
  34.   },
  35.   globalData:{
  36.     userInfo:null
  37.   }
  38. })

app.js内调用了App函数（只能在app.js内调用）注册小程序实例，可以在这个文件中监听处理小程序的声明周期函数，并可以在此声明全局变量。 
小程序提供了全局方法getApp返回小程序实例

  1. var app = getApp()
  2. console.log(app.globalData) // {userInfo:null}

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

  1. 2）app.json
  2. {
  3.   "pages":[
  4.     "pages/index/index",
  5.     "pages/logs/logs"
  6.   ],
  7.   "window":{
  8.     "backgroundTextStyle":"light",
  9.     "navigationBarBackgroundColor": "#fff",
  10.     "navigationBarTitleText": "WeChat",
  11.     "navigationBarTextStyle":"black"
  12.   },
  13.   "tabBar": {
  14.     "list": [{
  15.       "pagePath": "page/index/index",
  16.       "text": "首页"
  17.     }, {
  18.       "pagePath": "page/logs/logs",
  19.       "text": "日志"
  20.   },
  21.   "networkTimeout": {
  22.     "request": 10000,
  23.     "downloadFile": 10000
  24.   },
  25.   "debug": true
  26. }

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

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

3）app.wxss样式表

  1. /**app.wxss**/
  2. .container {
  3.   height: 100%;
  4.   display: flex;
  5.   flex-direction: column;
  6.   align-items: center;
  7.   justify-content: space-between;
  8.   padding: 200rpx 0;
  9.   box-sizing: border-box;
  10. }
框架页面部分微信小程序入门教程及实例(图3)

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

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

  1. {
  2.     "backgroundTextStyle":"light",
  3.     "navigationBarBackgroundColor": "#fff",
  4.     "navigationBarTitleText": "WeChat",
  5.     "navigationBarTextStyle":"black"
  6. }
  7. 然后再看看page.js
  8. // page.js
  9. Page({
  10.   data: {
  11.    // 页面的初始数据
  12.     text: "This is page data."
  13.   },
  14.   onLoad: function(options) {
  15.     // 页面加载时
  16.   },
  17.   onReady: function() {
  18.     // 页面渲染完成时
  19.   },
  20.   onShow: function() {
  21.     // 页面显示时
  22.   },
  23.   onHide: function() {
  24.     // 页面隐藏时
  25.   },
  26.   onUnload: function() {
  27.     // 页面卸载时
  28.   },
  29.   // 自定义属性，使用this方法
  30.   viewTap: function() {
  31.     this.setData({
  32.       text: 'Set some data for updating view.'
  33.     })
  34.   }
  35. })
3.WXML组件

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

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

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

4.WXSS

WXSS用于描述WXML的样式表 
为了适应各种屏幕，WXSS扩展了尺寸单位rpx（responsive pixel），规定屏幕宽度为750rpx（20rem） 
另外，WXSS并不支持所有css选择器，目前支持的选择器有

  • .class
  • #id
  • element
  • element,element
  • :after
  • :before
5.数据绑定

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

  1. <!--index.wxml-->
  2. <view class="container">
  3.   <text>{{hello}}</text>
  4. </view>
  5. //index.js//index.js
  6. Page({
  7.   data: {
  8.     hello: 'Hello World'
  9.   },
  10.   onLoad: function () {
  11.     this.setData({
  12.       hello:'Hello World'
  13.     })
  14.   }
  15. })

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

6.条件渲染

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

  1. <view wx:if="{{condition}}"> True </view>
7.列表渲染

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

  1. <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  2.   {{idx}}: {{itemName.message}}
  3. </view>
8.模版

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

  1. <template name="msgItem">
  2.   <view>
  3.     <text> {{index}}: {{msg}} </text>
  4.     <text> Time: {{time}} </text>
  5.   </view>
  6. </template>

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

  1. < template is="msgItem" data="{{...item}}"></template >
  2. data
  3. Page({
  4.   data: {
  5.     item: {
  6.       index: 0,
  7.       msg: 'this is a template',
  8.       time: '2016-09-15'
  9.     }
  10.   }
  11. })
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

  1. // index.wxml
  2. <import src="item.wxml"/>
  3. <template is="item" data="{{text: 'forbar'}}"/>
  4. include可以将目标文件中除了
  5. <!-- index.wxml -->
  6. <include src="header.wxml"/>
  7. <view> body </view>
  8. <include src="footer.wxml"/>
  9. <!-- header.wxml -->
  10. <view> header </view>
  11. <!-- footer.wxml -->
  12. <view> footer </view>
11.路由传参

一个url如下

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

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

  1. Page({
  2.   onLoad: function(options) {
  3.     this.setData({
  4.       title: options.title
  5.     })
  6.   }
  7. })
12. API

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

13.TodoList

最后是一个案例

  • 显示任务
  • 添加任务
  • 删除任务
  • 标记任务是否完成
  • 计算任务总数和已完成的任务数量
index.wxml
  1. <!--index.wxml-->
  2. <view class="input">
  3.   <input bindinput="bindKeyInput" placeholder="请输入任务名称" value="{{inputValue}}"/>
  4.   <button bindtap="add">确定</button>
  5. </view>
  6. <view class="list">
  7.   <block wx:for="{{list}}">
  8.     <view>
  9.       <checkbox-group bindchange="change" data-index="{{index}}">
  10.         <checkbox value="{{item.checked}}"checked="{{item.checked}}" />
  11.       </checkbox-group>
  12.       <text>{{item.value}}</text><button bindtap="delete" data-index="{{index}}">删除</button>
  13.     </view>
  14.   </block>
  15.   <view>
  16.     {{complete}}个已完成/{{list.length}}个任务
  17.   </view>
  18. </view>

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

index. wxss
  1. /**index.wxss**/
  2. .input {
  3.     padding: 20 rpx
  4. }
  5. .list view {
  6.     padding: 10 rpx 20 rpx;
  7.     overflow: hidden
  8. }
  9. .list view text {
  10.     display: inline - block;
  11.     line - height: 92 rpx
  12. }
  13. .list view button {
  14.     width: 200 rpx;
  15.     display: inline - block;
  16.     float: right
  17. }
  18. index.js
  19. //index.js
  20. Page({
  21.   data: {
  22.     list:[],
  23.     complete:0
  24.   },
  25.   bindKeyInput:function(e){
  26.     this.setData({
  27.       inputValue:e.detail.value
  28.     })
  29.   },
  30.   add:function(){
  31.     var list = this.data.list;
  32.     list.push({checked:false,value:this.data.inputValue});
  33.     this.setData({
  34.       list:list,
  35.       inputValue:''
  36.     })
  37.   },
  38.   delete:function(e){
  39.     var list = this.data.list;
  40.     list.splice(e.target.dataset.index,1)
  41.     this.setData({
  42.       list:list
  43.     })
  44.     this.com_task()
  45.   },
  46.   change:function(e){
  47.     console.log(e.detail.value[0])
  48.     var list = this.data.list;
  49.     list[e.target.dataset.index].checked = !!e.detail.value[0]
  50.     this.setData({
  51.       list:list
  52.     })
  53.     this.com_task()
  54.   },
  55.   com_task:function(){
  56.     var complete = 0,list = this.data.list;
  57.     for(var i=0,len=list.length;i<len;i++){
  58.       console.log(list.checked)
  59.       if(list.checked!=false){
  60.         complete++
  61.       }
  62.     }
  63.     this.setData({
  64.       complete:complete
  65.     })
  66.   }
  67. })

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

页面展示效果如下

微信小程序入门教程及实例(图4)



免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有