微信公众号开发

微信小程序开发

本文主要是介绍微信小程序开发,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

小程序开发软件

  1. [点此此处进行下载](稳定版 Stable Build | 微信开放文档 (qq.com)) 选择最新版本下载,按步骤安装
  2. 开始后新建项目选择测试号

软件目录介绍

  1. pages文件必要
  2. utils文件可删除,存放公共文件
  3. app.js 入口文件,包括登录等 逻辑文件
  4. app.json 配置文件
  5. app.wxss 样式文件
  6. project.config.json 项目配置文件,字体等配置
  7. sitemap.json 索引地图

模拟机查看页面

在app.json页面中,将“pages”:{}中的语句交换位置即可

新建页面也在app.json页面“pages”:{}中直接增加page语句

组件

  • view 块标签

    ​ | 属性 | 类型 | 默认值 | 必填 | 说明 |
    ​ | ---------------------- | ------- | ------ | ---- | ------------------------------------------------------------ |
    ​ | hover-class | string | none | f | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 |
    ​ | hover-stop-propagation | boolean | false | f | 指定是否阻止本节点的祖先节点出现点击态 |
    ​ | hover-start-time | number | 50 | f | 按住后多久出现点击态,单位毫秒 |
    ​ | hover-stay-time | number | 400 | f | 手指松开后点击态保留时间,单位毫秒 |

  • text 行标签

属性类型默认值必填说明
selectablebooleanfalsef文本是否可选 (已废弃)
user-selectbooleanfalsef文本是否可选,该属性会使文本节点显示为 inline-block
spacestringf显示连续空格
decodebooleanfalsef是否解码

space的合法值

说明
ensp中文字符空格一般大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小
  • 媒体组件

    ​ image(图片) [点击见此文档](image | 微信开放文档 (qq.com))

  • 导航

    ​ navigator超链接 [点击见此文档](navigator | 微信开放文档 (qq.com))

  • scroll_view 滚动视图使用 [点击见此文档](scroll-view | 微信开放文档 (qq.com))

  • swiper 轮播组件 [点击见此文档](swiper | 微信开放文档 (qq.com))

表单组件

​ [点击见此文档](button | 微信开放文档 (qq.com))

  • button 按钮组件
  • form
  • checkbox
  • input 输入框
  • switch 等

框架

  1. 全局配置
  • pages

  • windows

  • tabBar

  1. 单页面配置

    类比全局配置

  2. WXML语法 [点击见此文档](数据绑定 | 微信开放文档 (qq.com))

    ​ 数据绑定等

.js中page内的生命周期函数

自定义点击触发事件 [点击见此文档 ](事件 | 微信开放文档 (qq.com))

API

API就是内置的方法、事件

  1. 基础用法

  2. 路由用法

自定义组件

方法:

  1. 在根目录下创建components文件夹

  2. 在components下创建新组件名,如lsl,继续在lsl文件夹下单击右键创建component

  3. 在创建好的组件的wxml中写出想要现实的内容,在wxss中设置样式

  4. 比如首页想要调用组件,就需要在index.json中进行配置

  5. 在index.json中调用的方法,属性名是组件名,值是组件路径

    {
      "usingComponents": {
          "lsl":"/components/lsl/lsl"
      }
    }
    
  6. 在index.wxml中就可以使用组件了,如

    <lsl></lsl>
    </lsl>
    

自定义组件传递属性

  1. 在自定义组件上传递自定义属性,如

    <Putitle myTitle="行业动态"></Putitle>
    
  2. 需要来到Putitle自定义组件中的js中,接收该自定义属性,如

    properties:{
        //myTitle就是自定义的属性名,需要指定type(String/Number/Array/Object),指定value默认值
        myTitle:{
            type:String,
            value:""
        }
    }
    
  3. 在PubTitle.wxml中渲染从前端传过来的属性。如:

    <view class="PubTitle">
    	<view class="txt">{{myTitle}}</view>
    </view>
    
这篇关于微信小程序开发的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!