首页 > 互联网课堂

小程序学习

发布时间:2020-03-14 09:19:57访问人数:

小程序的特点

  • 入口浅

    小程序可以从很多地方进入,比如扫一扫,摇一摇,搜索,公众好等等..

  • 体积小

    小程序对代码是有限制的,不能超过2MB,所以他的体积是很小的,不然怎么叫小程序呢是不?

  • 体验好

    正是因为小程序可以通过扫一扫、摇一摇等方式进入,所以不需要像安卓app那样通过应用商城花费流量下载,并且因为小程序体积小,所以运行快,综合而言,小程序具有很好的体验性。

当然,事物都是有两面性的,小程序既有优点,也有它的缺点

比如:

1、小程序不是你想搜到就搜到,通常都是别人使用后分享过来,自己才能使用。

2、小程序没有用户体系,小程序没有人注册,所以没有自己特定的用户。

3、小程序因为体积太小,所以功能不是很强大。

等等.....

当然,这些问题暂时还不是我们所能考虑的,我们需要的就学习如何开发小程序。

小程序的开发

首先

我们需要去微信公众平台去注册,才能对小程序进行开发,在这里我就不说那些啦。
今天学习小程序,发现小程序的开发与vue框架非常像是,所以,只要vue学会了,开发小程序就会比较轻松了。

这里我将把一些有可能在开发过程中遇到的错误写下来,用于方便以后查阅。

知识点一:

在小程序中想要进行路由跳转有三种方法,第一是使用 <navigator open-type="navigateTo"/> 组件的方式,第二种是 wx.navigateTo 使用编程式路由,第三种是 tabBar 跳转页面,但是,正所谓一上不容二虎,一个页面,不可以即使用组件方式或编程式路由又使用 tabBar 方式跳转。如果使用了 tabBar 前面两种方法都将无效,但是凡事都有特列,如果我们真的即想通过组件或编程式路由跳转,又想通过 tabBar跳转,我们也可以做到,就是将组件的 open-type="navigateTo" 改为 open-type="reLaunch ",将编程式路由由 wx.navigateTo 改为 wx.reLaunch。当然这些在官方文档上都有,但是,有时候没有注意到还是很老火的。

知识点二:

小程序处理数据的方式和react比较相似。

data: {  compented:false,
  lista:""}

就比如现在这个,如果想要在js中获取数据,就必须通过this.data.lista才能将lista这个数据拿到,而在更改这个数据的时候,也需要通过this.setData({}) 设置。所以,朋友们千万别搞错啦。而且当我们创建了一个组件,组件里面有通过父级传下来的数据,最终也是合并到data这里面的,所以我们既可以通过this.data.得到properties中的数据,也可以通过this.properties.得到数据。

知识点三:

小程序因为不是基于浏览器开发的,所以里面的标签没有div这一写法,虽然它大部分都和html标签差不多,但是还是有些是不一样的,只能自己总结了,今天就遇见一个,如下:

<checkbox value='{{item.isShow}}' checked='{{item.isShow}}'>
    {{item.count}}</checkbox>

今天做了一个todos小案例,刚开始我将复选框写为何html标签一样,结果得到的却是type为text,于是我就想到,可能这个标签在小程序中不是这样使用的,于是在网上就搜到了如上写法。所以,当我们在写小程序无法得到自己想要的效果的时候,不防去搜索一下是不是我们写的是不是和小程序中的不一样。

知识点四:

由于在做todos的时候需要获取当前点击的列表的索引值,但是不知道事件如何传参,所以在网上搜倒一种方法,见代码:

复选框:<checkbox value='{{item.isShow}}' checked='{{item.isShow}}' data-index="{{index}}" bindtap="handlechange">{{item.count}}</checkbox>

js方法:
    handlechange(event){        var cloneList=this.data.list;        var index=event.currentTarget.dataset['index'];
  }

通过 event.currentTarget.dataset['index'] 我获得了当前点击的列表的索引值。

知识点五:

由于小程序里没有vue那种v-model指令,所以想要获取input中的数据并实时更新只有通过 bindinput 这个事件来完成,具体代码如下:

handleAdd(ev){    this.setData({      lista:ev.detail.value //这是获取到的input的value值,然后赋值给data设置的属性
    })
  }

在这里,本人将今天的todos小案例代码放上,当然,肯定有很多地方可以优化,暂时就不管啦。功能实现就好啦。

todos.js: todos的js文件

Component({  /**
   * 组件的初始数据
   */
  data: {
      list:[
      {count:111,isShow:true}
      ],
      all:true,
      action:false,
      compented:false,
      lista:""
  },  /**
   * 组件的方法列表
   */
  methods: {
      handleClick(ev){        this.setData({
          all:false,
          action:false,
          compented:false
        })        var istrue=ev.currentTarget.id;       if(istrue==="all"){        this.setData({
          all:true
        })
       }else if(istrue==="action"){        this.setData({
          action:true
        })
       }else{          this.setData({
            compented:true
          })
       }
      },
      handleAdd(ev){        this.setData({
          lista:ev.detail.value
        })
      },
      handleKey(){        this.setData({
          list:[{count:this.data.lista,isShow:false},...this.data.list]
        })
      },
      handlechange(event){        var cloneList=this.data.list;         var index=event.currentTarget.dataset['index'];         for(var i=0;i<cloneList.length;i++){            if(i===index){
                  cloneList[i].isShow=!cloneList[i].isShow;
            }
         }         this.setData({
          list:cloneList
         })
      }
  }
})

todos.wxml:todos的视图文件

<input type="text" bindinput="handleAdd"/><button bindtap="handleKey">添加</button><include  src="all.wxml" wx:if="{{all}}" /><include  src="action.wxml" wx:if="{{action}}"  /><include  src="compented.wxml" wx:if="{{compented}}" /><button id="all" catchtap="handleClick">all</button><button id="action" catchtap="handleClick">action</button><button id="compented" catchtap="handleClick">compented</button>

all.wxml:todos的全部显示区域

<view wx:for="{{list}}" wx:key="{{index}}"><checkbox value='{{item.isShow}}' checked='{{item.isShow}}' data-index="{{index}}" bindtap="handlechange">{{item.count}}</checkbox></view>

action.wxml:todos的已完成区域

<view wx:for="{{list}}" wx:key="{{index}}">
    <checkbox value='{{item.isShow}}' checked='{{item.isShow}}' wx:if="{{item.isShow===true}}">{{item.isShow===true ? item.count : ""}}</checkbox></view>

compented.wxml:todos的未完成区域

<view wx:for="{{list}}" wx:key="{{index}}">
    <checkbox value='{{item.isShow}}' checked='{{item.isShow}}' wx:if="{{item.isShow===false}}">{{item.isShow===false ? item.count : ""}}</checkbox></view>

小程序学习(图1)


宇宸网络 Copyright © 2010-2020
地址:即墨天山一路信和居  
地址:青岛市南福州南路87甲福林大厦-A座
鲁ICP备20004321号 

鲁公网安备 37028202000792号

  • QQ
  • 电话
  • 首页
  • 留言
  • 返回顶部