玩转微信小程序

玩转微信小程序

• 来一堆感言：根据公司需求开始玩的小程序，之前觉得入手应该蛮难。后来发现小程序比起安卓来说，上手更快些，安卓更偏向底层，组件更原生些。小程序毕竟是微信提供的入口，偏向大众，UI集成H5跟Css，玩起来比较舒服。但是缺点是安卓的组件更加灵活，java里面有个继承，可以拓展自己的组件的属性，小程序在这方面要引用外部的插件或者使用自身的，没有那么灵活。
• 其实官方的API文档已经入门讲的很细了，需要可参考https://developers.weixin.qq.com/miniprogram/dev/。下面谈谈我自己对小程序框架的理解及一些常用方法的整理，希望对大家有所帮助。如果有写的不对的地方，欢迎指正~

项目结构

• 1、根目录

app.js： 全局js,这里面的js方法可以让所有的js引用。

 //引用方式
 var app = getApp();
 app.xxx();

app.json：四个属性pages， window，tabBar，networkTimeout。

pages:用来存放页面路径，在page目录下建立的页面都要在此声明，否则编译会出现“找不到页面的错误。”，
window：对全局小程序样式进行设置,比如背景色,顶部导航栏的颜色
tabBar：底部导航栏,一般用在登陆之后的home页里面。进行首页/个人中心/内容页tab切换。
networkTimeout：设置全局js请求超时时间，上传或者下载文件时间等。

app.wxss：小程序全局样式，在此定义的样式，其他可以可以直接用。

project.config.json：配置文件
备注：在根目录下可以根据自己的需求建立目录，比如image文件夹存放图片。

• 2、页面page:用来放页面的，根据项目页面类型可以建立相应的目录

//这里具体说一下建立一个页面分为几块
1.xxx.wxml:微信标记语言，及类似h5,用来画页面
2.xxx.js:JS文件，用来处理前台页面的事件，实时更新数据，或者发起后台请求。
3.xxx.json:这里面具体我还没有处理过数据，只是用来处理navigationBarTitleText,你们要是有别的使用方法，欢迎留言~
4.xxx.wxss:微信样式语言，就是局部样式定义，这里的优先级大于全局的，类似内部样式优先于类选择器的样式。

• 3、uitls:顾名思义，用来放工具类的，反复调用的方法可以提出来放在里面，然后在页面js里面可以引用使用。

//引用方式-使用require工具类
    var utils=require('../../uitls/utils.js')

数据交互

• 小程序主要分为视图层xxx.wxml与逻辑层xxx.js.页面与逻辑层的交互，主要在使用page的data属性，简单的说，只要改变data里面的属性值，页面引用的变量就会随着变化，例如：

 //1.text.wxml：页面使用“{{}}”来引用data里面的属性
 <view>{{msg}}</vew>
 //2.text.js
 page({
    data:{
    msg:'数据交互'//可以在data里面直接初始化赋值
    },
    changeValue:function(){
        var _this=this;
        _this.setData({
          msg：'改变msg的值'//也可以在方法里面直接更改属性值
        });
  }
})

事件

• 以下主要罗列一些常用的事件，具体事件可以参考官方文档，文档api都说的很详细
  https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
  
  • 1、bindInput:获取输入框的值

 //wmml
<input name="userName" placeholder="请输入用户名" bindInput="getName">
//js
page({
    data:{userName:''},
    getName:function(e){
        var _this=this;
        _this.setData({
            userName:e.detail.value
        })
    }
})

• 2、bindtap:按钮点击事件

    //wmml
    <button bindtap="onLogin">登录</button>
    //js
    page({
        onLogin(){
          alert('登录按钮点击了');
        }
    })