微信小程序开发指南

由于公司需要，最近几个月在开发一个医疗预约管理的小程序，能够实现在线预约，病症推荐科室，账号管理等功能，支持中英双语。

下面我就根据开发经历写一写小指南：

组件篇

基础组件

1.view
个人感觉view的用法就像div，做一个嵌套元素用，唯一不同的是，这个元素没有滚动条，所以想让区域元素能够滚动，就要用它的加强版scroll-view
2. scroll-view
scroll-x，scroll-y两个bool类型属性 来设置此滚动块是水平滚动还是垂直滚动
3. 万能的text
text这个组件实在是太牛逼了，简直P标签 span标签集合体，在此标签内能做到你就可正常想法写文字了，它会帮你处理空格跟换行，而且可以嵌套使用。
但不能在text组件里嵌套其他组件如view!
eg:

    <text>      你好，      世界！    我是万能的 text 标签    </text>    <text>      嵌套text      <text>我是嵌套内容</text>咋了嘛？    </text> 

图：

4. image 图片标签
注意！！！！ background-url属性不能引入本地的图片，要想用只能上传到网上！小程序的一大坑
回到正题：
- image标签有默认的宽高，所以不能不设置宽高
- image标签融合了背景图片的剪切缩放功能用用mode属性来控制

·默认scaleToFill：不保持宽高设置宽高，跟html img标签设置宽高方法一样·widthFix：设置宽度，高度会按照宽高比自动计算出来·aspectFit：保持宽高比缩放图片，会使长边完全显示出来，即图片能够完整显示·aspectFill：保持宽高比缩放裁剪图片，会使短边完全显示出来，即图片的中心区域肯定能显示出来，类似于background-size:cover;

5. navigator 链接跳转标签
navigator标签类似于a标签 但是href属性变成了src属性，即跳转的页面地址（一般为应用内wxml的相对路径）
open-type：跳转类型设置

·navigate：往路由栈里插入一个页面，并跳转到该页面，此跳转方式有返回键，但最多跳转5个页面！！！因为小程序的有一个路由栈，每次navigateTo都会入栈，navigateBack（后退键）都会出栈，该路由栈最多存放5个页面，所有一点要设计好，不能打开5个页面！！·redirect：页面重定向 此类型跳转会从新打开一个页面，类似于一个页面出一次栈然后新页面再进一次栈，该方式看起来不受5个页面限制都能打开页面，但以前打开的页面没有出栈，如果以前打开了4个页面，接下来navigateTo还是无法打开页面，而且redirect的页面使用后退键回退·reLaunch：改进版页面重定向，此操作会出栈所有打开的页面，并跳转到新页面，适用于返回首页这种操作，是改进版的页面重定向，如果打开页面太多想关闭已打开的页面，也可以用此方法

表单相关

1.表单之父 form组件
我觉得用起来就是方便获取提交的对象，类似于jq的serializeArray()方法，其中表单组件要写name属性（此属性值即为生成的对象的key值，组件的value值，为生成对象的value值）
bindsubmit: form表单内的submit按钮点击时触发提交，其中
eg:

formSubmit: function (e) {    //其中params即为要提交的对象    var params = e.detail.value;}

图：

2.稀疏平常的input
跟平常的input框没啥区别呦，需要注意的有两点
- 注意：没有change事件，change事件变成了bindinput
- 不能实现双向绑定，刷值需要setData一下
eg:

 bindKeyInput: function(e) {    //e.detail.value 获取输入框的value值    this.setData({      inputValue: e.detail.value    })  }

3.picker 内置选择器（select）
这个就很神奇了，既能当普通选择器用，又能当日期时间选择器（见微信api很全了），普通选择器用法如下

    //中英文切换选择器（普通版picker）    data:{        languages:[            {   key:"zh",                value:"中文"            },            {   key:"en",                value:"English"            }        ]    },    changeLanguage:function(e){        var index = parseInt(e.detail.value);        this.setData({          languageIndex: index        })    }   <picker class="language" bindchange="changeLanguage" value="{{languageIndex}}" range="{{languages}}" range-key="value">     <view class="picker">        <text>{{languages[languageIndex].value}}</text>     </view>   </picker>

图：



常用API篇（未完待续）

小程序实现微信授权登录操作

  wx.login({    success: function (info) {        //获取code 传给后台 得到openId 完成授权操作        console.info("code", info.code);    }      })      wx.getUserInfo({    withCredentials: true,    success: function (res) {       that.globalData.userInfo = res.userInfo       that.globalData.userInfo.code = info.code              typeof cb == "function" && cb(that.globalData.userInfo)            }          })        }      }    });