admin 管理员组

文章数量: 887629

weixin

一、微信小程序的优劣势

1、优势

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

2、劣势

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

二、 项目的目录结构

  • pages:
    1. wxml: 编写小程序界面结构的地方
    2. wxss: 编写小程序样式的地方
    3. json：编写界面配置的地方
    4. js：编写界面逻辑的地方
  • utils: 编写工具类的地方
  • app.js：创建程序实例的位置
  • app.json: 编写全局配置地方
  • app.wxss: 编写全局样式的地方
  • project.config.json: 项目的配置文件
  • sitemap.json：配置哪些网站可以被检索到

 配置tabBar

 "tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "assets/icons/index.png","selectedIconPath": "assets/icons/index-active.png"},{"pagePath": "pages/my/index","text": "我的","iconPath": "assets/icons/wode.png","selectedIconPath": "assets/icons/wode-active.png"}]},

 

三、小程序模板语法

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。

在小程序中没有H5提供的那些标签了，这里我们需要使用小程序给我们提供的组件。小程序给我们提供的标签很多，这里我们就介绍几个常用的，剩下的大家可以结合文档使用。

view标签是我们开发过程中最常用的标签了，这个就相当于Html中的div。

text标签也是我们开发中常用的，这个相当于Html中的span

image标签相当于我们Html中的img。

1、逻辑渲染

WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，使用 wx:elif 和 wx:else 来添加一个 else 块，除此之外微信小程序还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候会删除掉对应的DOM，hidden属性则是通过display属性设置为none来进行条件渲染。

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view><view hidden="{{condition}}">
隐藏
</view>

2、列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item，使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。

<view wx:for="{{list}}" wx:key='index'>{{item.name}}----{{index}}</view>list: [{name: '一',},{name: '二'}],
<view wx:for="{{list2}}" wx:key='index2' wx:for-item='item2' wx:for-index='index2'>{{item2.name}}----{{index2}}</view>

3、模板

<template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view>
</template>msgList: [{index: 0,msg: '哈哈哈',time: '16:30'},{index: 1,msg: '嘻嘻嘻',time: '16:40'}],<view wx:for="{{msgList}}"><template is='msgItem' data="{{...item}}"></template>
</view>

引用import和include（include是引用除了template之外的内容）

<!-- item.wxml -->
<template name="item"><text>{{text}}</text>
</template><import src="item.wxml"/><template is="item" data="{{text: '测试'}}"/>

4、wxss

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。

在小程序中，规定所有手机的屏幕宽度都是750rpx，所以在不同尺寸的屏幕下1rpx的宽度都不同。

1rpx = （屏幕宽度/750）px

在iphone6手机下，屏幕宽度是375px，所以1rpx=0.5px。

引用：@import './test_0.wxss'

5、修改页面数据

 this.setData({ msg: 'Hello World' })

本文标签： weixin

版权声明：本文标题：weixin 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687373344h95239.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。