微信小程序开发入门（看这篇就够啦！）

大家好，欢迎来到IT知识分享网。

为什么选择开发微信小程序？

答：

• 1.可在微信里面自由分享
• 2.不用下载app，减少手机内存占用
• 3.能使用微信的api接口快速开发

一、认识并创建tarBar

1.1认识tarBar

• tarBar是移动端应用常见的页面效果，用于实现多个页面的快速切换
• 创建时：最少2个，最多5个tarBar标签页

说人话就是:导航栏

最常用的有：iconPath、selectedIconPath

1.2创建tabBar

二、wxml常用标签介绍

1.1 容器-view

1.2 轮播图控件-swiper

<view> // <swiper autoplay="true" interval="3000" circular="true"> <swiper-item> <image src="/images/1.jpg" class="slide-image"/> </swiper-item> <swiper-item> <image src="/images/2.jpg" class="slide-image"/> </swiper-item> </swiper> </view> 

autoplay:是否自动播放
interval：与下一个滑块的间隔时长
circular：是否衔接滑动

1.3 多选控件-icon

 <icon type="success" size="23"></icon> <icon type="circle" size="23"></icon> 

1.4 跳转-navigator

<navigator url="跳转的页面路径" > 点击跳转到目标页面 </navigator> 

三、认识&使用模板与模块

1.1 模版-template

可以把template模板理解成一个外包公司的产品，在它之前，我们都是自己一条工序走到底，有了它之后，它的精美框架和样式，可以直接被我们使用，不仅方便而且能省去很多的力气，可谓人类之星！

1.1.1 为什么需要模板？

template(模板):主要用于显示,简单的说主要是用于嵌入wxml的代码,模板中是可以拥有对应的样式以及逻辑,但是他并没有属于的对应的js文件,它的逻辑依赖于引用的页面。

1.1.2 如何使用模板？

导入模板框架

<import src="../../template/priductlist/priductlist.wxml"/> <template is="模板名称" data="{ 
      {item}}"></template> 

导入模板样式

@import '../../template/priductlist/priductlist.wxss'; 

1.2 模块

1.2.1 为什么需要模块？

将复杂的应用程序分解为一系列独立的模块，每个模块负责完成特定的功能或业务逻辑。

1.2.2 如何创建模块？

你可能会问了，为什么要另存这么麻烦？

其实更多的是为了简洁代码页，方便编写，也方便后续的数据修改。

var list=[{ 
      id:1, type:0, imgUrl:"../../images/item1.jpg", title:"美容养颜" },{ 
      id:2, type:1, imgUrl:"../../images/item2.jpg", title:"保健调养" }] module.exports={ 
      list:list } 

1.2.3 如何使用模块？

导入模块

require(“…/…/comment/typedata.js”); 

使用模块

var myData=require("../../comment/typedata.js"); Page({ 
      data: { 
      typeData:myData.list,//分类导航数据 } }) 

四、如何绑定&修改数据？

1.1 定义数据

Page({ 
      data:{ 
      ipOpen:true, name:olive } }) 

1.2 绑定数据

内容绑定：

<view>{ 
    {属性名}}</view> <view>{ 
    {item}}</view> 

属性绑定：

<input value="{ 
      {属性名}}"/> <input value="{ 
      {item}}"/> 

1.3 数据修改

通常我们获取到有效数据，需要将有效数据追加或替换原有的数据，这时，我们需要用到数据修改，非常常用。

this.setData({ 
      list:list }) 

详细使用点这里查看

1.4 事件绑定

• 当用户进行相应的操作（如点击、长按等）时，对应的事件就会被触发，并执行相应的事件处理函数
• 事件处理函数：当事件被触发时，需要定义对应的事件处理函数来执行相应的逻辑。

常用的事件类型：点击（bindtap）、长按（bindlongtap）、输入（bindinput）、表单提交（bindsubmit）、滚动到底部（bindscrolltolower）和选择器改变（bindchange）

这里给个栗子：

<view class="list { 
      {isTouchMove?'touch-move':''}}" bindtouchstart="touchstart" bindtouchmove="touchmove" > 

bindtouchstart 手指触摸事件
bindtouchmove 手指触摸移动事件

1.5 class选择器的三元表达式

<view class="list { 
      {isTouchMove?'touch-move':''}}"></view> 

翻译：在选择器为list的元素中，检索isTouchMove，为true则给list添加‘touch-move’样式，为false则添加“”（空）

五、如何将数据渲染到页面？

1.1 条件渲染

• wx:if
• wx:elif
• wx.else

<view wx:if="age>40">1</view> <view wx:elif ="age==40">2</view> <view wx:else>3</view> 

1.2 列表渲染

<view class="item" wx:for="{ 
      {showData}}"> <view class="td"> { 
    {item.MTId}} { 
    {item.status}} </view> </view> 

六、页面如何实现跳转传参？

1.1 拼接URL传参

1.1.1 URL传参

1.1.2 小程序api传参

tiao:function(e){ 
      wx.navigateTo({ 
      url: '../indexDetail/indexDetail?id='+e.currentTarget.dataset.id, }) }, 

1.1.3 实现跳转的几种方法

1.2 全局变量传参

1.2.1什么是全局变量？

1.2.2使用方法

定义

//app.js App({ 
      globalData: { 
     //全局变量 city:广州 } }) 

使用

var app=getApp(); app.globalData.city=city 

1.3 本地存储传参

1.3.1什么是本地存储？

1.3.2使用方法

wx.setStorageSync("key","value")//设置本地存储 wx.getStorageSync("key")//获取本地存储 wx.removeStorageSync("key")//删除本地存储 wx.clearStorageSync("key")//清空本地存储 

七、如何获取数据？

wx.request({ })

wx.request({ 
      url:"http://iwenwiki.com:3002/data", method:'GET/POST', data:{ 
      id:1 } success:res=>{ 
      console.log("数据请求成功") } }) 

八、页面常用交互

1.1 wx.onLoad()

onLoad() 发起请求

1.2 wx.onReady()

1.3 wx.onShow()

onShow() 动态更新数据或状态

1.4 wx.onHide()

1.5 wx.onReachBottom()

1.6 wx.onPullDownRefresh()

详细的请点击此处浏览

九、封装

概念：将抽象得到的数据和行为(或功能)相结合,形成一个有机的整体,也就是将数据与操作数据的源代码进行有机的结合,形成“类”,其中数据和函数都是类的成员

十、总结