小程序学习
小程序的特点
入口浅
小程序可以从很多地方进入, 比如扫一扫, 摇一摇, 搜索, 公众好等等..
体积小
小程序对代码是有限制的, 不能超过 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>
来源: https://www.cnblogs.com/xiaojianwei/p/10100186.html