微信小程序开发（1）基础知识

一。技术点：1.采用了JavaScriptCore动态解析   2.大量借鉴React.js+ReactNative.js思想

要求的技术：HTML,CSS,JS,ES6,懂一些IOS/Android开发更好

二。搭建微信小程序开发环境

微信小程序官网：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644083132

安装包下载完成后，一路安装，最后运行。会出现一个

扫码登录就好。创建一个自己需要的项目，点击创建。创建如下

 一个移动应用程序有一个app.js

目录中最后三个文件，一个程序只有有一个。wxss代表weixin(微信) css。wxml代表微信的标签的文件，可以理解为html，可以在这上面写我们需要的代码，<view></view>标签代表的就是界面。index文件夹下的index.wxml和index.wxss是我们做网页前端用的。logs文件夹下面是一些日志文件，你点击视图界面中的头像也可以看到日志。

（个人感觉小程序开发跟vue有些类似，不信你可以看下面的操作）

修改粉色线所在的位置，然后编译之后，微信界面的字母也会发生变化。

aoo.js  app.json 必须放在根目录下面。app.wxss是全局样式文件。

page1.wxml是主页面，也就是我们在别的开发中称为界面视图。page1.js是主程序页面，在别的程序中也称为control或者是module。page1.wxss是修饰这个page1.wxml的文件，可以理解为css的一个变种。（微信当时为了搭建一套完全自有的一套生态系统，所以他把文件名后缀都修改了）。page1.json是页面1的配置文件。

page1会先使用自己的文件，对于没有的东西，他会使用共有的。微信中，同一个页面中要求文件名必须一样。

wxml有点类似于模板引擎中的模板。

做交互式页面可以用到，setData只能改里面的字段的类，不能触发函数。

一个微信小程序，必须实例化一个App对象。

app.json这个文件不能写任何的注释。因为官方文档就这么规定的。

 

他真的很类似于vue，不信你可以看下面的事例

app.json

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

/**index.wxss**/
.text-label{
  color:red
}

//index.js
//获取应用实例

var param={
  data:{
    mytext:'Hello World',
  }
};

//创建一个页面 注册一个页面 param里面带有一个参数
//这个参数就会传到index.wxml文件中，把param.data.mytextt替换成index.wxml里面的mytext
Page(param);

<!--index.wxml-->
<view class="container">
  <text class="text-label">{{ mytext }}</text>
</view>

 

下面讲解View组件和flexbox弹性盒布局

把index.wxml作为index.html文件来进行书写架构，在index.wxss中书写css规范，就像刚开始学习前端那样子，就可以写出简单的微信主页了。

<view></view>默认是列布局的。

微信小程序的布局很多都借鉴了HTML 5和CSS 3。

<!--index.wxml-->
<view class="page">
  <view class="page-section">
    <text>View Demo</text>
  </view>

  <view class="page-section">
    <view>flex-dection : row</view>
    <view style='display:flex;flex-direction:row;'>
      <view class="flex-item bc-green"></view>
      <view class="flex-item bc-red"></view>
      <view class="flex-item bc-blue"></view>
    </view>
  </view>


  <view class="page-section">
    <view>flex-dection : column</view>
    <view style='display:flex;flex-direction:column;'>
      <view class="flex-item bc-green"></view>
      <view class="flex-item bc-red"></view>
      <view class="flex-item bc-blue"></view>
    </view>
  </view>

  <!-- justify-content -->
  <view class="page-section">
    <view>justify-content : flex-start</view>
    <view style='display:flex;flex-direction:row;justify-content:flex-start;'>
      <view class="flex-item bc-green"></view>
      <view class="flex-item bc-red"></view>
      <view class="flex-item bc-blue"></view>
    </view>
  </view>

  <view class="page-section">
    <view>justify-content : flex-start</view>
    <view style='display:flex;flex-direction:row;justify-content:flex-end;'>
      <view class="flex-item bc-green"></view>
      <view class="flex-item bc-red"></view>
      <view class="flex-item bc-blue"></view>
    </view>
  </view>

  <view class="page-section">
    <view>justify-content : flex-start</view>
    <view style='display:flex;flex-direction:row;justify-content:center;'>
      <view class="flex-item bc-green"></view>
      <view class="flex-item bc-red"></view>
      <view class="flex-item bc-blue"></view>
    </view>
  </view>

  <view class="page-section">
    <view>justify-content : flex-start</view>
    <view style='display:flex;flex-direction:row;justify-content:space-between;'>
      <view class="flex-item bc-green"></view>
      <view class="flex-item bc-red"></view>
      <view class="flex-item bc-blue"></view>
    </view>
  </view>

   <view class="page-section">
    <view>justify-content : flex-start</view>
    <view style='display:flex;flex-direction:row;justify-content:space-around;'>
      <view class="flex-item bc-green"></view>
      <view class="flex-item bc-red"></view>
      <view class="flex-item bc-blue"></view>
    </view>
  </view>

   <view class="page-section">
    <view>align-items : flex-start</view>
    <view style='display:flex;height:200px;flex-direction:row;justify-content:space-between;align-items:flex-start;'>
      <view class="flex-item bc-green"></view>
      <view class="flex-item bc-red"></view>
      <view class="flex-item bc-blue"></view>
    </view>
  </view>

  <view class="page-section">
    <view>align-items : flex-end</view>
    <view style='display:flex;height:200px;flex-direction:row;justify-content:space-between;align-items:flex-end;'>
      <view class="flex-item bc-green"></view>
      <view class="flex-item bc-red"></view>
      <view class="flex-item bc-blue"></view>
    </view>
  </view>

  <view class="page-section">
    <view>align-items : center</view>
    <view style='display:flex;height:200px;flex-direction:row;justify-content:space-between;align-items:center;'>
      <view class="flex-item bc-green"></view>
      <view class="flex-item bc-red"></view>
      <view class="flex-item bc-blue"></view>
    </view>
  </view>


</view>

/**index.wxss**/
.page{
  background-color: #ffff00;
  font-size: 30px;
}
.page-section{
  padding: 10px;
  background-color: #fffff0;
  margin: 10px;
  font-size: 16px;
}
.flex-item{
  width:50px;
  height: 50px;
}
.bc-green{
  background-color: green;
}
.bc-red{
  background-color: red;
}
.bc-blue{
  background-color: blue;
}

 

 

微信小程序事件交互

 

下面这个有一个问题，一直报错id未定义。没找到错误，先把代码放出来

//index.js
//获取应用实例

var count = 0;
var param={
  data : {
    clickMsg : '显示点击的内容'
  },
  //e就是事件对象，包含了很多内容,比如在什么位置被点击了，什么时间被点击了
  clickMe : function(e){
    console.log(e);
    count++;

    //如何区分到底是view0点击 还是view1点击
    //通过id就可以区分view0被点击还是view1被点击
    id = e.currentTarget.id;

    //把view0上点击的显示出来
    param.data.clickMsg = '显示点击内容' + id + '点击次数' + count;

    //取得data-xxxx的值 控件wxml里面可以携带私有数据
    console.log(e.currentTarget.dataset);

    //setData重新刷新页面数据
    this.setData(param.data);
  }
};
//创建一个页面 注册一个页面 param里面带有一个参数
//这个参数就会传到index.wxml文件中，把param.data.mytextt替换成index.wxml里面的mytext
Page(param);

<!--index.wxml-->
<view class="">
  <view>{{ clickMsg }}</view>
  <view id="view0" data-hi="data-view0" class='view-item' bindtap="clickMe">点击view0</view>
  <view id="view1" data-hi="data-view1" class='view-item' bindtap="clickMe">点击view1</view>

</view>

/**index.wxss**/
.view-item{
  padding: 10px;
  background-color: limegreen;
  border-radius:5px;
  margin: 5px;
}