微信小程序的初识
小程序是什么
- 小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
- 任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布
微信小程序的优势和劣势
优势
- 微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。
- 使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
- 体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
- 成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。
不足
- 单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是 20M（这个值一直在变化，以官网为准）。
- 需要像app一样审核上架，这点相对于H5的发布要麻烦一些。
- 处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。
项目的目录结构
pages:
- wxml: 编写小程序界面结构的地方
- wxss: 编写小程序样式的地方
- json：编写界面配置的地方
- js：编写界面逻辑的地方
- utils: 编写工具类的地方
- app.js：创建程序实例的位置
- app.json: 编写全局配置地方
- app.wxss: 编写全局样式的地方
- project.config.json: 项目的配置文件
- sitemap.json：配置哪些网站可以被检索到
微信小程序实现跑马灯
wxml代码：
<view class="boxs">
跑马灯
<button bindtap="start">开始</button>
<button bindtap="stop">暂停</button>
{
{
msg}}
</view>
js代码:
// pages/hot/hot.js
Page({
/**
* 页面的初始数据
*/
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
},
msg:'猥琐发育别浪！！！',
timer:''
},
start(){
console.log(this.data.msg.substring(0,1))
console.log(this.data.msg.substring(1));
// this.setData =this.data.msg.substring(1) +this.data.msg.substring(0,1)
clearInterval(this.timer)
this.timer=setInterval(()=>{
this.setData({
msg:this.data.msg.substring(1)+this.data.msg.substring(0,1)
})
},200)
},
stop(){
clearInterval(this.timer)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
css样式：
/* pages/hot/hot.wxss */
.title{
color: red;
}
.mine{
color: turquoise;
font-size: 20px;
}
.mine:hover{
color: yellow;
}
.boxs{
margin-top: 20px;
font-size: 30px;
text-align: center;
}
button{
background-color: tomato;
}