微信小程序的初识

微信小程序的初识

小程序是什么

1. 小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
2. 任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布

微信小程序的优势和劣势

优势

1. 微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。
2. 使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
3. 体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
4. 成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

不足

1. 单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是 20M（这个值一直在变化，以官网为准）。
2. 需要像app一样审核上架，这点相对于H5的发布要麻烦一些。
3. 处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

项目的目录结构

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;
}