微信小程序源码:http://www.getweapp.com/
首先
先申请一个appid,要用一个没有绑定过微信或者公众号的一个邮箱来注册微信小程序,这些可以跟着微信小程序注册的步骤来。
注意事项:
1. 绑定的身份证,一个身份证只能最多申请5个小程序
2. 填写服务类目,里面有应用一类的选择,和小游戏选择,如果两者只能选择一种,小游戏或者应用类目,不能一起选,如果你选择小游戏,那么这个appid只能开发小游戏,
下载开发工具
接下来下载微信开发工具,地址为微信应用开发工具下载地址 。这个工具可以开发小游戏,小程序和公众号网页,不过这个工具会根据你的appid来决定你可以开发什么项目,如果你的appid选的是小游戏,那么只能用这个工具默认创建的就是游戏类的项目。
工具的使用:
微信小程序新建一个快速启动模板
目录介绍:
app.json :配置页面,任何一个新添加的页面都要在里面配置添加
界面布局和html布局差不多,但是需要用到小程序提供的组件
html
底部导航:tabBar,在app.json里面配置,可以要官方文档查看用法小程序官方文档 说明在框架–>配置–>tabBar
注:json里面不能添加注释
{
"pages": [ //项目里面有几个界面,就在page里面配置几个页面路径
"pages/index/index",
"pages/join/join",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#f00", //顶部导航的背景色
"navigationBarTitleText": "我的第一个小程序", //顶部导航的标题
"navigationBarTextStyle": "#fff" //顶部导航字体的颜色
},
"tabBar": {
"selectedColor": "#f00", //字体被选中选中指定的颜色
"list": [{ //list集合的长度为底部导航模块的数量,最少1个,最多5个
"pagePath": "pages/index/index", //指定要跳转的页面路径
"text": "首页", //底部导航的标题内容
"iconPath": "images/home_defult.png", //导航的图标路径
"selectedIconPath": "images/home_press.png" //被选中的导航图标路径
},
{"pagePath": "pages/join/join",
"text": "加入",
"iconPath": "images/join_default.png",
"selectedIconPath": "images/join_press.png"
}
]
}
}
组件:
view:官方文档说是师徒容器, 就相当于html的div可以模块化
text:可以支持\n
等换行
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<!-- <swiper>轮播图 -->
<block wx:for="{{imgUrls}}" wx:key="imgUrls">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
<!--列表-->
<view class='view_list'>
<view class="view_item" wx:for="{{listDatas}}" wx:key="listDatas" bindtap='toDetail' data-index='{{index}}'>
<!-- bindtap绑定的事件 data-index常常伴随list绑定的点击事件,为绑定的事件提供下标值 -->
<view class='view_img'>
<image class='img_a' src="{{item.img}}" /> <!--item是集合里面某一条目,img我们自己定义的,和js里面给定的值搭配-->
</view>
<view class='view_msg'>
<view class='view_title'>{{item.title}}</view> <!--item.title是listDatas指定的某一条目的title-->
<text class='text_des'>{{item.des}}</text>
</view>
<view class='view_btn'>
<image class='btn_detail' src='/images/btn_look.png'></image>
<image class='btn_again' src='/images/btn_money.png'></image>
</view>
</view>
</view>
js
由于小程序不是dom解析,不能通过像html的document.getElementById()
等来获取组件 ,用法和vue.js差不多。
绑定点击事件:bindtap :里面指定一个方法,获取参数e可以获取一些相关值,如下标
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: true,
autoplay: false,
interval: 5000,
duration: 1000,
listDatas:[
{
img:'/images/sug_a.png',
title:"标题",
des:"描述"
},
{
img:'/images/sug_b.png',
title: "标题",
des: "描述"
},
{
img: '/images/sug_c.png',
title: "标题",
des: "描述"
},
{
img: '/images/sug_d.png',
title: "标题",
des: "描述"
}
]
},
// onload:页面刚进入的时加载的方法,setData也可以为页面设定相关的值
onLoad: function(){
this.setData({
test:'01',
})
},
// toDetail:在wxml页面指定绑定的方法
toDetail: function(e){
//e.currentTarget.dataset.index;获取点击条目的下标值
var index = e.currentTarget.dataset.index;
console.log(index);
}
})
e打印的值
{type: "tap", timeStamp: 1811, target: {…}, currentTarget: {…}, detail: {…}, …}changedTouches: Array(1)0: clientX: 112clientY: 209force: 1identifier: 0pageX: 112pageY: 209__proto__: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()length: 1__proto__: Array(0)concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}__proto__: ObjectcurrentTarget: dataset: {index: 0}id: ""offsetLeft: 0offsetTop: 150__proto__: Objectdetail: {x: 112, y: 209}target: {id: "", offsetLeft: 93, offsetTop: 206, dataset: {…}}timeStamp: 1811touches: [{…}]type: "tap"_requireActive: true__proto__: Object
API的调用:点击跳转小程序的API链接,拨打电话–>wx.makePhoneCall
如拨打电话,先布局界面
<!-- tell:绑定的点击事件 -->
<button bindtap='tell'>拨打电话</button>
然后在js里面调用api,然后点击按钮就拨打该电话
tell:function(){
wx.makePhoneCall({
phoneNumber: '1393566****' //仅为示例,并非真实的电话号码
})
},