1.打开微信web开发者工具
双击打开：微信web开发者工具
2.新建项目
点击添加项目。（appid，项目名，项目保存的路劲：可以随便输入。）
3.打开项目
4.项目结构说明
5.编写代码
创建页面
index.wxml
.wxml后缀的文件是页面结构文件
<!--index.wxml-->
<view >
<button bindtap="button_xiaomage">小码哥教育：</button>
<!-- 轮播图 -->
<swiper class = "header-swiper" autoplay="true" scroll-x="true" interval="3000" duration="1000">
<block wx:for-items="{{ads}}">
<swiper-item>
<image class = "header-swiper-img" src="{{ item.img_url }}" mode="aspectFill" ></image>
</swiper-item>
</block>
</swiper>
<!-- scroll列表图 -->
<scroll-view scroll-y="true" style="height:300%;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<block wx:for-items="{{ motto }}">
<swiper-item>
<view class="content-text" >
<Text style="content-text" >{{item.name}}</Text>
</view>
</swiper-item>
</block>
</scroll-view>
</view>
index.wxss
index.wxml界面的css样式
/**index.wxss**/
.header-swiper {
height: 120px;
}
.header-swiper-img {
width: 100%;
height: 320px;
}
.content-text{
width:100%;
height:30px;
margin: 3px;
border-color: #d8d8d8;
border-width: 0.5px;
border-style: solid;
}
.content-text{
text-align: center;
padding-top: 15px;
}
index.js
index.wxml界面的需要的js代码
//index.js
//获取应用实例
var app = getApp()
//页面上数据的准备
var indexData = {
ads:[
{
"title": "",
"img_url": "http://mall.520it.com/img/a1.jpg",
},
{
"title": "",
"img_url": "http://mall.520it.com/img/a2.jpg",
},
{
"title": "",
"img_url": "http://mall.520it.com/img/a3.jpg",
},
{
"title": "",
"img_url": "http://mall.520it.com/img/a4.jpg",
},
{
"title": "",
"img_url": "http://mall.520it.com/img/a5.jpg",
}
],
motto: [
{"name":"Android学院"},
{"name":"Android学院"},
{"name":"UI学院"},
{"name":"UI学院"},
{"name":"IOS学院"},
{"name":"IOS学院"},
{"name":"Java学院"},
{"name":"Java学院"},
{"name":"C++学院"},
{"name":"C++学院"},
{"name":"H5学院"},
{"name":"H5学院"}
]
}
Page({
data: indexData,//初始化数据
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
//实现点击小码哥教育跳转到logs界面
button_xiaomage (){
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
that.update()
})
}
})
app.js
app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用MINA提供的丰富的API
//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this;
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo;
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
});
}
},
globalData:{
userInfo:null
}
})
app.json
app.json是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释
“pages”:[
“pages/index/index”,
“pages/logs/logs”
]
在这声明引进了两个界面（index，logs）
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
app.wxss
app.wxss是整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
6.项目运行的效果
感谢：小码哥http://bbs.520it.com/portal.php
项目的下载地址：github
来源：
http://bbs.520it.com/forum.php?mod=viewthread&tid=2365&extra=page%3D1
