微信小程序开发指南

前期准备

　　1、需要去微信公众平台上注册一个开发者的账号，链接如下（https://mp.weixin.qq.com/wxopen/waregister?action=step1），一定要是未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱。否则不能成功注册

　　2、下载微信开发者工具。

环境部署

　　1、在注册好小程序账号之后，然后登录自己的小程序后台。找到自己的小程序AppID，微信开发者工具需要用。可以在自己的微信小程序的后台绑定别的开发者，这样可以协同办公，大家都可以用这个appid测试。

　　2、打开微信开发者工具，新建一个小程序项目，地址选择项目地址就行了，选空目录也会自动生成小程序的模板。完成之后就可以准备开发了，建议先到网上看看大家写的小程序，结合小程序的API，了解一下小程序是怎么运行的。我们在前期开发的时候，可以暂时性的关闭小程序的域名检测，避免我们开发阶段需要部署一些域名、证书等

准备开发

　　1、直接打开小程序的API（https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017118）。先仔细的看下小程序的框架，大体了解一下小程序的逻辑层，视图层，了解小程序是怎么运行的，运行在什么样的环境下。然后再来看小程序的组件，函数方法。

　　2、小程序的运行环境是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。所以我们基本上不能用jquery/zepto之类的框架。

代码演示

　　演示一个图片上传的小例子

wxml部分

<view class="big-logos"> 
　　<image bindtap="upimgfont" src='../images/camera.png' class="upimg"></image>
     <block wx:for="{{img_font}}"> 
           <view class='logoinfo'> 
     　　       <image src='{{item}}' id="file"></image> 
           </view> 
     </block> 
</view>

js部分

upimgfont: function () {     
 var that = this;   
    wx.chooseImage({      
        count: 1,
      sizeType: ['original'],  
      success: function (res) {  
        that.setData({  
          img_font: that.data.img_arr.concat(res.tempFilePaths)  
        })
        tempFilePaths = res.tempFilePaths;
        wx.uploadFile({
              url: 'http://xx:xx:8000/profile', //仅为示例，非真实的接口地址
              name: 'file',
              filePath: tempFilePaths[0],
              formData:{
                  
              },
              success: function(res){
                var data = res.data
                //do something
                console.log(data);
                
              }
            })
　　　　},
　　　　fail:function(){

　　　　}
});

wxss的部分

.big-logos{
    width: 243px;
    height: 153px;
    opacity: 0.6;
    z-index: 20;
    border: 1px solid #ddd;
    position: relative;
    margin: 0 auto;
}
.upimg{
    width: 62px;
    height: 48px;
    margin-left: 90px;
    margin-top: 52px;
    z-index: 10;
    position: relative;
}
.logoinfo{
    position: absolute;
    width: 243px;
    height: 153px;
    margin-top: -104px;
}
.logoinfo image{
    width: 100%;
    height: 100%;
}

文章由本人亲自整理，绝对原创，转载请说明。如有问题也请大家多多包涵