一。技术点: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;
}