微信小程序（基本操作）

本文介绍: 自定义组件 | 微信开放文档(1) 组件模板和样式(2) Component 构造器(3) 组件间通信与事件(4) 组件生命周期(6) 组件间关系(7) 数据监听器(8) 纯数据字段1、定义不是创建page，而是创建component，一个小程序组件（wxml,wxss,js,json)//组件名.jsComponent({ //构造一个组件//组件的属性列表,相当于vue组件的propstitle:{ //属性名type:String,//类型value: ‘默认值’},

小程序：就是小程序，mini program。现在市面上有微信小程序，百度智能小程序等等。

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。也体现了“用完即走”的理念，用户不用担心是否安装太多应用的问题。应用将无处不在，随时可用，且又无需安装卸载。

全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。

a. 程序框架本身所具有的快速加载和快速渲染能力，加之配套的云能力、运维能力和数据汇总能力，使得开发者不需要去处理琐碎的工作，可以把精力放置在具体的业务逻辑的开发上。

b. 小程序的模式使得微信可以开放更多的数据，开发者可以获取到用户的一些基本信息，甚至能够获取微信群的一些信息，使得小程序的开放能力变得更加强大

c. 运行速度远远高于移动端网页，几乎可与手机APP媲美

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

sitemap.json，project.config.json

1）、project.config.json是项目开发环境配置，包括版本、依赖、程序名之类。

2）、sitemap.json：配置小程序内的搜索，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129 。

如果想全局禁用索引，配置project.config.json，在 setting内部添加checkSiteMap:false,

App()是注册小程序的，Page() 是注册页面的，都接受一个 Object 参数，App() 必须在 app.js 中调用，Page()必须出现在页面.js中，必须调用且只能调用一次，都会给当前注册生命周期钩子，和实例成员(方法、属性)

Object 参数

pages里面 let app=getApp(), app.实例属性|方法

如：<组件 wx:for="{{数据}}">{{item}}/{{index}}</组件>

<组件 wx:if="{{布尔数据}}"> 惰性渲染（相当于vue的 v-if）

wx:elif="{{}}"

wx:else

<组件 hidden="{{布尔数据}}" 适合频繁渲染，true表示隐藏，false表示显示（相当于vue的 v-show）

this.data.属性

this.setData({key:value})，响应式的显示在view层，数据的修改结果是异步的

app.setData({key:value}) 修改的是主程app

<组件 bindxxx="实例方法"></组件>

<组件 catchxxx="实例方法"></组件>

 //.wxml
 
 <text bindtap="clickMe" >点我</text>
 
 //.js
 
  clickMe(event){
      console.log(event);
      console.log(event.currentTarget);//就是当前事件源（不是真实的dom，是json对象）
  }

<组件 bindxxx="实例方法" data-参数名称="值"></组件>

//实例方法
function(event){
    event.currentTarget.dataset.参数名称;
}

<input value="{{ipt}}" bindinput="checkIpt"></input>

 checkIpt(e){
    this.setData({ipt:e.detail.value});//双向绑定
  },

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onShareTimeline	function	用户点击右上角转发到朋友圈
onAddToFavorites	function	用户点击右上角收藏
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见响应显示区域变化
onTabItemTap	function	当前是 tab 页时，点击 tab 时触发

url="/pages/xx/xx?a=1&b=2" switchTab 不能传参数

Wxml文件：
<button bindtap="toOther" >跳到other</button>

Js文件:
toOther(){
    console.log("toOther");
    wx.redirectTo({
        url: "../../pages/other/other",// 注意这个相对路径：朝回返两级，也不能出现在tabBar里
        success: function () {
            console.log("到other了");
        },
        fail: function (e) {
            console.log("失败了，other");
            console.log(e);
        }
    });
},

"tabBar": {
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "首页"
        },
        {
            "pagePath": "pages/goodslist/goodslist",
            "text": "商品列表"
        }
    ]
}

<button bindtap="toIndex" >回到index</button>
<button bindtap="toOther" >跳到other</button>

toIndex: function () {
    wx.switchTab({
        url: '../../pages/index/index', //这个能够成功，因为，index在tabBar里的list属性里有。
    })
},
toOther() {
    console.log("toOther");
    wx.switchTab({
        url: "../../pages/other/other", //不能跳转，因为，other没有出现在tabBar的list属性里。
        success: function () {
            console.log("到other了");
        },
        fail: function (e) {
            console.log("失败了，other");
            console.log(e);
        }
    });
},

<button bindtap="regCheck" >注册</button>

regCheck(){
    wx.showToast({
        title: "注册成功",
        icon: "success",
        duration: 500,
        mask: true
    })
},

<button bindtap="deleteInfo" >删除</button>

deleteInfo(){
    wx.showModal({
        title: '微信小程序',
        content: '确认要删除吗',
        success: function (res) {
            if (res.confirm) {
                console.log("你确认了");
            } else if (res.cancel) {
                console.log("你取消了");
            }
        }
    })
},

<button bindtap="getData" >获取数据</button>

  getData(){
    //显示loading
    wx.showLoading({
      title: 'loading……………………',
    })
    // 发送请求
    setTimeout(function(){
      // 响应回来，隐藏loading
      wx.hideLoading();
    },2000);

  },

onLoad: function () {
    wx.request({
        url: 'http://localhost:3000/goods',
        header: {
            'content-type': 'application/json' // 默认值
        },
        success(res) {
            console.log(res.data)
        }
    })
}

//组件名.js
Component({ //构造一个组件
   //组件的属性列表,相当于vue组件的props
  properties:{
    title:{ //属性名
      type:String,//类型
      value: '默认值'
    }
  },
  //组件数据，内部状态
  data:{ 
    msg:'..'
    num1:1,
    num2:2,
    sum:3
  }
          
  methods:{ //组件方法
    show(){
        console.log(this.data.msg/this.properties.title)
        this.setData({msg:...}) / properties 不可修改
     }
  }
                     
  //组件监听器
  observers: {
    'num1, num2': function(num1, num2) {
      // 在 num1 或者 num2 被设置时，执行这个函数
      this.setData({
        sum: num1 + num2
      })
    }
    
})

"usingComponents":{
  "使用时的组件名":"components/comp1/comp1"
}

"usingComponents":{....}

"usingComponents":{....}
"component": true, // 当前组件可以套用组件

<comp1 title="{{值}}"></comp1>

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

微信程序组件

概念：

微信小程序的优势及适用场景。

1) 开发角度：

2) 商业角度：

准备工作

注册小程序帐号

获取开发密钥（appId）

安装开发工具

目录结构

文件类型

开发文档

框架（mina框架）

配置

全局配置

页面配置

项目环境配置

wxml（官方组件)

wxss（样式）

js（逻辑）

App()和page()

页面与主程通讯

数据绑定

列表渲染

条件渲染

数据修改和获取

事件

基本格式

事件对象

传参

双向绑定

生命周期钩子函数

小程序生命周期

页面的生命周期

路由

声明式路由

路由传参

接参

编程式路由

人机交互

数据交互

1、请求本地模拟数据

2、request数据请求

1)、request数据请求真实接口数据

2)、request请求mock数据

自定义组件

相关文章

发表回复 取消回复

发表回复取消回复