wulitang
wulitang

微信小程序开发分享

1.在微信官网下载开发工具

2.新建小程序项目

微信小程序开发分享_第1张图片

---AppID：如果有就填写，如果没有点击绿色文字跳过填写，（没有也可以开发只不过没有在手机预览的功能）；
---项目名称：命名一个简单明了的名称；
---项目目录：选择一个开发的文件夹，此时项目目录下方会出现一个创建quick start项目的选项，这里可以快速帮你构建一个项目的完整目录，不建议取消勾选。（如果要打开其他人的demo需要选择到pages文件夹的上一层级，不然无法显示）；
---点击添加项目进行下一步；
Tips:在设置中有设置代理选项，注意在这里如果设置了代理，有可能在编辑器内显示空白；

3.小程序结构简介

微信小程序开发分享_第2张图片

其中，.wxml 是页面的结构文件，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。

├───app.js // 小程序逻辑
├───app.json // 小程序公共设置
├───app.wxss // 小程序公共样式
├───utils // 用来放置工具类js文件
│ └───utils.js // 工具类js
└───pages // 项目页面开发目录，里面的每个子目录代表一个独立页面
├───index // index 页面目录
│ ├───index.js // index 页面逻辑
│ ├───index.wxml // index 页面结构
│ └───index.wxss // index 页面样式表
└───logs // logs 页面目录
├───logs.js // logs 页面逻辑
├───logs.json // logs 页面数据
├───logs.wxml // logs 页面结构
└───logs.wxss // logs 页面样式表

在pages中建立的页面都需要在根目录下的app.json声明，相当于设置路由,其他公共设置也需要在这里设置;官方教程


  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
Tips:

---数组的第一项代表小程序的初始页面;
---小程序中新增/减少页面，都需要对 pages 数组进行修改，特别的，如果减少页面但是未修改pages的数组，编译会抛出异常;
---在这里修改数组后框架会自行去寻找路径中的文件，如果路径中的json文件内容为空的话，会抛出异常;
---同样的，路径中js为空也会抛出“Page调用异常”的错误，所以要在js中加入“Page({})”;

4小程序开发

4.1.数据绑定官方教程

微信小程序数据绑定使用"Mustache"语法（双大括号）将变量包起来；


 {{message}} 

Page({
  data: {
    message: 'Hello MINA!'
  }
})

当需要展示一组数据时，可以使用wx:for;更多使用方法


  {{index}}: {{item.message}}

Tips:默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item


Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
取值传值方式

1.列表index下标取值，并且在页面传值
实现方式是：data-index="{{index}}"赋值及e.currentTarget.dataset.index来获取即可；
从服务列表页中传服务id到服务详情页面，以获取服务详情信息；
server/list页面实现以下代码


      
        
          
              
          
          {{item.title}}
        
      


  detailmovie: function (e) {
    //使用currentTarget获取id
    var id = e.currentTarget.id;
//把获取到的id存在全局变量中，下一个页面直接调用;
    app.requestDetailid = id;
    console.log(id);
    //一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo,
    wx.navigateTo({
      url: '../detail/detail',
    })
  },

页面实现onLoad(options)方法，从url路径中获取objectId;


onLoad: function (options) {
  var objectId = options.objectId
}

2.form表单取值
通过

与 

formSubmit: function(e) {
  // detail
  var detail = e.detail.value.detail;
  // realname
  var realname = e.detail.value.realname;
  // mobile
  var mobile = e.detail.value.mobile;
}

通过实现


realnameConfirm: function(e) {
  var realname = e.detail.value;
}
Tips：

1: 视图层嵌入的是{{message}}而不是{{data.message}}，微信框架默认设定视图层绑定的变量定义在Page对象的data属性中，也就是说，如果变量需要绑定到视图层，一定要定义data属性中；

2: 通过调用Page对象的setData(Page对象预定义)方法，可以更新界面数据，但是直接设置变量是无效的，因此对于绑定到视图层的变量，要永远使用setData方法来设置变量值；

4.2.文件引入

为了提升体验流畅度，编译后的代码包大小需小于 1MB ，大于 1MB 的代码包将上传失败

1.1 WXML

WXML提供两种文件引入方式，import和include。区别在于：import可以引入定义好的template模板，模板是有作用域的；而include就是拷贝一个公用的代码片段到目标文件中，适合做公共页面片的拆分。

import可以在该文件中使用目标文件定义的template，如：
在 item.wxml 中定义了一个叫item的template：

在 index.wxml 中引用了 item.wxml，就可以使用item模板：