微信小程序开发

小程序开发软件

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 行标签

​

属性	类型	默认值	必填	说明
selectable	boolean	false	f	文本是否可选 (已废弃)
user-select	boolean	false	f	文本是否可选，该属性会使文本节点显示为 inline-block
space	string		f	显示连续空格
decode	boolean	false	f	是否解码

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

2. 单页面配置

   类比全局配置

3. 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>