您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 小程序

微信小程序开发:一篇文章掌握基础配置、基本语法和功能

时间:2021-03-08 11:05:33  来源:  作者:

框架主题文件

App.json : 小程序公共设置,小程序的全局配置文件

app.js: 小程序的逻辑文件,用于注册小程序全局实例,编译时会和其他页面逻辑文件打包成js文件

app.wxss:小程序公共样式,对全局页面有效

配置文件

{
	//页面路径配置  
  "page":[
    "mypages/index/index",
    ...
  ],
  //默认窗口设置
  "window":{
     "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    //支持旋转屏幕
    "pageOrientation":"auto"
    },
  
  //底部tab设置
  "tabBar":{
  	"color":"#000000",
    "selectedColor":"#ff7f50",
    "backgroundColor":"#ffffff",
    "borderStyle":"black",
    "position":"bottom",
    "text":[
      {
    	"iconPath":"images/home.png",
      	"selectedIconPath":"images/home-selected.png",
        "text":"首页"
      },
      ...
    ]
  },
  
  //设置网络请求API的超时时间 
  "networkTimeout":{},
  //是否开启debug模式  
  "debug":false
}

 

app.js

App({
  //小程序初始化完成时触发,全局只触发一次 
  onLaunch (options) {
    // Do something initial when launch.
  },
  
  //小程序启动,或从后台进入前台显示时触发。也可以使用wx.onAppShow绑定监听 
  onShow (options) {
    // Do something when show.
  },
  //小程序从前台进入后台时触发,也可以使用wx.onAppHide绑定监听 
  onHide () {
    // Do something when hide.
  },
  //小程序发生脚本错误或者API调用报错时触发。也可以使用wx.onError绑定监听
  onError (msg) {
    console.log(msg)
  },
  //当页面不存在时触发
  onPageNotFound(Object.object){
  	wx.redirectTo({
    	url:'pages/...'
    })//如果是tabbar页面,请使用wx.switchTab
  },
  //全局数据
  globalData: 'I am global data'
})

页面配置文件

此文件非必须文件,如果存在将覆盖app.json里的设置项

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

页面逻辑page.js如:index.js

//index.js
Page({
//页面初始数据
  data: {
    text: "This is page data."
  },
  //监听页面加载
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  //监听页面初次渲染完成 
  onReady: function() {
    // Do something when page ready.
  },
  //监听页面显示
  onShow: function() {
    // Do something when page show.
  },
  //监听页面隐藏
  onHide: function() {
    // Do something when page hide.
  },
  //监听页面卸载 
  onUnload: function() {
    // Do something when page close.
  },
  
  //监听用户下拉
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  
  //监听页面上拉触底
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  //监听页面滚动
  onPageScroll: function() {
    // Do something when page scroll
  },
  //监听页面尺寸改变
  onResize: function() {
    // Do something when page resize
  },
  //监听点击tab时触发
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 用户自定义函数Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  //用户自定义数据
  customData: {
    hi: 'MINA'
  }
})

获取当前页面

//获取页面数组
var pages = getCurrentPages();
//获取当前页对象
var currentPage = pages[pages.length-1]

事件处理

<view bindtap="myevent">点击执行逻辑层事件</view>
Page{
	myenvent:function(){
    	console.log('点击了view');
    }
}

界面结构文件数据绑定

<view>{{user.username}}</view>
Page({
data:{
	user:{username:"jack",age:18},
  ....
}
})
//设置数据
在方法中  this.setData({
	"user.username":'new name',
  ....
})

列表渲染

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
//02索引值
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
//03可嵌套
<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>
  </view>
</view>
//4多节点循环  
<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
//5 key
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

条件渲染

//if语句
<view wx:if="{{condition}}"> True </view>
//if..else 语句
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
//block wx:if
<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

自定义模板使用和引用

import

import可以在该文件中使用目标文件定义的template,如:

在 item.wxml 中定义了一个叫item的template:

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml,就可以使用item模板:

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import 的作用域

import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。

如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

include

include 可以将目标文件除了 外的整个代码引入,相当于是拷贝到 include 位置,如:

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
//声明
<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
//使用
<template is="msgItem" data="{{...item}}"/>
//数据 
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})
//使用2
<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

事件

touchstart

touchmove

touchcancel

touchend

tab

longpress //超过350ms

transitionend

animationstart

animationiteration//迭代结束时触发

animationend

touchforcechange //支持3DTouch的iphone重按时触发

//bing事件名 会冒泡

//catch事件 阻止冒泡

//mut-bind 冒泡对它无效

//事件函数参数e(事件对象),可以携带数据

//data-**

<view data-name="自定义数据"></view>
e.currentTarget.dataset.name 
//mark
<view mark:user="jack"></view>
e.mark.user

例子

{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"WeChat"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"WeChat"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

 

动画

this.animate(selector, keyframes, duration, callback)
 this.animate('#container', [
    { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
    { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'},
    { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' },
    ], 5000, function () {
      this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
        console.log("清除了#container上的opacity和rotate属性")
      })
  }.bind(this))
  this.animate('.block', [
    { scale: [1, 1], rotate: 0, ease: 'ease-out'  },
    { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in', offset: 0.9},
    { scale: [2, 2], rotate: 90 },
  ], 5000, function () {
    this.clearAnimation('.block', function () {
      console.log("清除了.block上的所有动画属性")
    })
  }.bind(this))

清除动画

this.clearAnimation(selector, options, callback)

滚动动画

this.animate(selector, keyframes, duration, ScrollTimeline)

 

this.animate('.avatar', [{
    borderRadius: '0',
    borderColor: 'red',
    transform: 'scale(1) translateY(-20px)',
    offset: 0,
  }, {
    borderRadius: '25%',
    borderColor: 'blue',
    transform: 'scale(.65) translateY(-20px)',
    offset: .5,
  }, {
    borderRadius: '50%',
    borderColor: 'blue',
    transform: `scale(.3) translateY(-20px)`,
    offset: 1
  }], 2000, {
    scrollSource: '#scroller',
    timeRange: 2000,
    startScrollOffset: 0,
    endScrollOffset: 85,
  })
  this.animate('.search_input', [{
    opacity: '0',
    width: '0%',
  }, {
    opacity: '1',
    width: '100%',
  }], 1000, {
    scrollSource: '#scroller',
    timeRange: 1000,
    startScrollOffset: 120,
    endScrollOffset: 252
  })


Tags:小程序开发   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
学习编程从hello world开始。学习微信小程序开发首先要安装一个微信开发者工具,官网上免费下载童叟无欺,下载完傻瓜式安装即可。 双击微信开发者工具,然后选择小程序,然后点击...【详细内容】
2021-05-12  Tags: 小程序开发  点击:(268)  评论:(0)  加入收藏
框架主题文件app.json : 小程序公共设置,小程序的全局配置文件app.js: 小程序的逻辑文件,用于注册小程序全局实例,编译时会和其他页面逻辑文件打包成js文件app.wxss:小程序公共样...【详细内容】
2021-03-08  Tags: 小程序开发  点击:(249)  评论:(0)  加入收藏
WeUI是什么WeUI 是一套同微信原生视觉体验一致的基础样式库。由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。它最初是为了给在微信端页面...【详细内容】
2021-03-08  Tags: 小程序开发  点击:(213)  评论:(0)  加入收藏
自从微信小程序上线之后,很多的商家对小程序有很高的期待,因为小程序的使用体验可以媲美app,而且使用起来比较方便,西安的青云在线小编告诉您,现在微信小程序之所以大家都比较喜...【详细内容】
2021-02-03  Tags: 小程序开发  点击:(182)  评论:(0)  加入收藏
想要开发微信小程序,在没有太多资金找外包团队定制、自建团队开发时,就需要你自己通过小程序开发工具来生成小程序了。现在各种开发工具很多,到底小程序开发工具有哪些?这些微信...【详细内容】
2020-09-22  Tags: 小程序开发  点击:(85)  评论:(0)  加入收藏
百度是大多数人耳熟能详的企业,时至今日,其用户量已累计突破上亿,是国内互联网中的巨头,对于企业和商家来说,百度旗下的百度小程序有很大的商用价值,不少企业在上面开发了自己公司...【详细内容】
2020-08-28  Tags: 小程序开发  点击:(97)  评论:(0)  加入收藏
前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家。如果对大家确实有帮助,别忘了点赞哦 ~ 微信开...【详细内容】
2020-08-26  Tags: 小程序开发  点击:(98)  评论:(0)  加入收藏
小程序已经渐渐走入我们的生活,我们平时使用的健康码就是小程序,很多我们使用的app应用,都有小程序版,因为它的便捷性,人们越来越习惯于使用它,而它带给我们的体验也越来越舒适。...【详细内容】
2020-08-10  Tags: 小程序开发  点击:(112)  评论:(0)  加入收藏
微信小程序开发,多端框架全面测评。最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?到底应该用哪个?作为 Taro 开发团队一...【详细内容】
2020-07-28  Tags: 小程序开发  点击:(104)  评论:(0)  加入收藏
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受。首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,...【详细内容】
2020-07-27  Tags: 小程序开发  点击:(95)  评论:(0)  加入收藏
▌简易百科推荐
一、项目背景随着小程序在用户规模和商业化上取得的极大成功,各大平台都推出了自己的小程序。然而这些平台的小程序开发在语法上又不尽相同,不同平台小程序代码的维护需要投入...【详细内容】
2021-11-05  携程技术    Tags:小程序   点击:(65)  评论:(0)  加入收藏
作者:灰灰来源:JS每日一题 一、背景传统的web开发实现登陆功能,一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录服务端校验用户信息通过之后,下发一个代表登录态...【详细内容】
2021-10-29  Nodejs开发    Tags:微信小程序   点击:(43)  评论:(0)  加入收藏
总结列举微信小程序开放能力清单 硬件能力 蓝牙 NFC读写 连接WIFI设备 开放能力 ...【详细内容】
2021-09-27  软件开发分享    Tags:微信小程序   点击:(60)  评论:(0)  加入收藏
核心商城(CoreShop)介绍核心小程序商城系统(CoreShop) 是基于 Asp.Net 5.0、Uni-App开发、支持可视化布局的小程序商城系统;前后端分离,支持分布式部署,跨平台运行;拥有分销、代理、...【详细内容】
2021-07-20  码农也有梦想    Tags:小程序商城   点击:(115)  评论:(0)  加入收藏
介绍Vue3发布已经有一段时间了,从目前来看,其生态还算可以,也已经有了各种组件库给予了支持,但是不管是Vue3还是Vue2都无法直接用来开发小程序,因此国内一些技术团队针对Vue开发...【详细内容】
2021-07-13  爱分享Coder    Tags:小程序   点击:(203)  评论:(0)  加入收藏
首先明确几个概念1. W3C:指万维网联盟(World Wide Web Consortium),是一个国际的标准的制定机构。2. H5(HTML5,HyperText Markup Language 5的缩写),HTML5 是由W3C制定的新HTML标...【详细内容】
2021-07-06  畅游零和一的海洋    Tags:微信小程序   点击:(152)  评论:(0)  加入收藏
在开发微信公众号时,需要不时请求URL和数据封装。为了不做重复的工作。提取公共部分进行封装。产生了相应的公众类。今天先来写下请求类,代码如下:public class HttpRequestP...【详细内容】
2021-06-16  java浮萍  今日头条  Tags:公共类   点击:(134)  评论:(0)  加入收藏
小程序上线后,改版了很多次,包括一些 Api 接口也有改动。如果你学习一个很久之前的小程序项目是没有意义的,本文推荐的小程序都是最近有更新的。相信在你学习、部署的过程中,不...【详细内容】
2021-06-08    程序猿久一  Tags:微信小程序   点击:(206)  评论:(0)  加入收藏
自从2019年微信公开课Pro在微信之夜演示《跳一跳》以来,微信小游戏已经不知不觉走过的三年,这三年中我们可以明显看到微信对小游戏的扶持,对于微信开发者来说,微信小游戏开发以...【详细内容】
2021-05-25  开课吧科科  今日头条  Tags:微信小游戏   点击:(212)  评论:(0)  加入收藏
学习编程从hello world开始。学习微信小程序开发首先要安装一个微信开发者工具,官网上免费下载童叟无欺,下载完傻瓜式安装即可。 双击微信开发者工具,然后选择小程序,然后点击...【详细内容】
2021-05-12  程序员fearlazy  fearlazy  Tags:微信小程序   点击:(268)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条