微信小程序 实例应用 分步练习 完整GitHub项目链接

小程序的简单练习的步骤，附加GitHub练习库—欢迎大家浏览，希望能够共同提高

小程序的定义

• 不需要下载安装，可以立即使用
  
  • 因为体积比较小，在加载的时候用户基本赶紧不到下载的过程
• 用户“用完即走”，不用关心是否安装太多的应用
  
  • 偶尔用，不用特别关注
  • 减少桌面上App的数量
• 应用无处不在，随时可用 小程序，让服务无处不在。

微信小程序适用范围：

• 业务逻辑简单
• 使用频率低
• 性能要求低

微信小程序开发

微信开发的方式

1. 单纯的微信网页开发（聊天的时候，发送的一些网页，在微信里面打开的）
2. 微信小程序（相当于一个嵌套在微信里面的App）
3. 微信公众号开发，需要关注的那些账号
   
   1. 订阅号
   2. 服务号（必须要公司实体才能申请）

相关

• 必须下载工具
  
  • 使用微信开发者工具预览 下载地址

单纯的网页开发（公众号）

• 兼容性问题
• 开发同等于正常的HTML5页面开发
  
  • 先将页面上传到服务器，然后测试
  • 需要使用微信提供的js js-sdk

小程序

• 文档后缀名不同
  
  • .wxml
  • .wxss
  • .js
  • .jsom
• wxml标签不同
  
  • 所有的HTML标签在wxml中无法使用，除非是在样式中设置
• wxss 基本上 和 css 没什么区别
• js
  
  • 微信小程序的js中，取消了所有的dom节点，禁止了动态生成的操作
  • 使用组件化，数据绑定的方法来实现逻辑
  • 类似于vue

doy1

• 模板标签template使用

• 定义模板

  
  <template name="header">
    <view>
      这是头部
    view>
  template>
  
  <template name="header2">
    <view>{{title}}view>
  
    <view>{{name}}view> 
  template>
  

• 使用模板

  
    <template is="header">
    template>
  
  
    <template is="header2" data="{{title}}">
    template> -->  

• 引入方法import和include的不同

  <include src="../../template/header.wxml"/>
  
  <template is="header" data="{{item}}">
  template> 

  • include引入外部的模板的时候 忽略了template定义的模板 直接引入相当于吧模板里面的内容复制到我们的页面
  • import 引入 只会引入目标文件中定义的 template 要通过template is=”header” 这样的方式使用模板，该外部模板传入数据的时候，需要绑定到data=”{{item}}
• 引入外部模板

doy2

• 标签使用

  • 1.使用以前的HTML标签的话，需要把这些标签转换成块元素，但是官方不建议使用–》推荐使用view
  • 2.使用以前的HTML标签的话，无法使用 id 选择器
    ——————还是使用官方提供的 标签 比较好
  • view 相当于我们以前的div 块级元素
  • text文本标签 内联元素 除了文本节点意外的其他节点都无法长按选中

• 布局方法

  • 使用view 标签进行布局

• wxss选择器

  • .class
  • id选择器
  • element
  • element，element 分组选择器
  • ::before
  • ::after

• 事件绑定

  • 绑定事件的方法 bind || catch

• event事件

  • event事件对象

• touch事件

  • 触摸事件

• 绑定事件 bind和catch的区别

  • bind 事件绑定不会阻止事件向上冒泡
  • catch 事件绑定可以阻止冒泡事件向上冒泡

doy3

• wx.request发送请求

 requestData() {
    var _that = this;/* 绑定this */
    wx.request({
      url: 'http://www.phonegap100.com/appapi.php?a=getPortalCate', //接口地址
      data: { /* 请求参数*/
        nmae: '小刘',
        age: '24'
      },
      header: { /* 请求数据的方式 */
        'content-type': 'application/json' // 默认值
      },
      success: function (res) { /* 请求成功的回调函数 */
        console.log(res.data);
        _that.setData({
          list: res.data.result /* 请求到的数据给list */
        })
      },
      fail(err) { /* 请求失败的参数 */
        console.log("err:" + err);
      }
    })
  },

点击查看官方文档

我的github练习目录

• doy1
  
  • 点击进入→→练习
• doy02
  
  • 点击进入→→练习
• doy03
  
  • 点击进入→→练习
• itday01
  
  • 点击进入→→练习
• itday02
  
  • 点击进入→→练习
• locally-life
  
  • 点击进入→→练习
• muke
  
  • 点击进入→→练习
• weapp-locally-master
  
  • 点击进入→→本地生活小程序
• test
  
  • 点击进入→→接口测试
  • 各种API接口测试
• ReaderMovie
  
  • 点击进入→→小程序项目实战