微信小程序_基础

小程序文档

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00064a9b998288cb0086840c65940a

账号注册

https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=

下载开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载安装完成后创建新项目

AppID位置：登录微信公众平台 —— 开发 —— 开发管理 —— 开发设置 —— AppID

一、项目

结构

结构说明

【注意】pages 目录下的每一个文件夹就代表一个页面。只要在 app.json 中配置了 pages jison 对象都对应的目录路径，就会自动生成相应的目录及文件。

二、JSON 语法

1. 严格遵守JSON 文件格式，键和值都得是双引号，且无法书写注释。
2. JSON的值只能是以下几种数据格式：

   （1）数字，包含浮点数和整数
   （2）字符串，需要包裹在双引号中
   （3）Bool值，true 或者 false
   （4）数组，需要包裹在方括号中 []
   （5）对象，需要包裹在大括号中 {}
   （6）Null
   

三、WXML 语法

特点

1. 布局方式和HTML 是一样的。
2. 标签名不再是传统的标签名，而是使用微信自己定义的一套标签。书写代码模式相同，只需要修改标签名。
3. 需要使用 js 传过来的值的时候，要使用 “{{变量名}}”

（一）条件渲染

1. wx:if=""条件 如果条件成立，则会渲染该标签

   <!--index.wxml-->
   <view wx:if="{{age > 18}}"> 
   进入网吧
   </view>
   

   // index.js
   // 获取应用实例
   const app = getApp()
   Page({
    data :{
    	age : 20
    }
   })
   

2. wx:if="条件" wx:elif="条件" wx:else="条件"(注意：elif 和 else 只能跟在 if 后面，否则会报错)

   <!--index.wxml-->
   <view wx:if="{{weather == '晴天'}}"> 
   出去逛街
   </view>
   <view wx:elif="{{weather == '阴天'}}"> 
    ݄去游泳
   </view>
   <view wx:else> 
   ݄哪儿也不去
   </view>
   

3. 如果需要通过条件来判断是否需要渲染一组标签， 那么可以使用 block。

   <!--index.wxml-->
   <block wx:if="{{weather === '晴天}}">
   	 <view> 
   		出去逛街
   	 </view>
   	 <view> 
   	 出去游泳
   	 </view>
   </block>
   

（二）列表渲染（循环）

1. 语法：wx:for="{{列表}}"（列表为数组）

2. 示例

   <view wx:for="{{[1,2,3,4,5]}}" wx:for-index="idx" wx:for-item="value:" wx:key="idx">
   	每一个item：{{value}}
   </view>
   

3. 循环中默认的下标名称是 index，默认值的名称是 item。如果要修改默认的下标和值的名称可以通过 wx:for-index="newName" 和 wx:for-item="newName" 来实现 。

4. wx:key 的作用
   指定列表中项目的唯一的标识符

（三）复用 WXML（模板）

1. 模板的定义
   （1）WXML 提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。定义时、使用 name 属性作为模板的名字。
   （2）示例

   <!-- msgItem.wxml -->
   <template name="msgItem">
       <view>
       	{{item.username}} --- {{item.sex}} --- {{item.age}}
       </view>
   </template>
   

2. 模板的使用
   （1）标签名仍使用 ，使用 is 属性，声明需要使用的模板名称，data属性将数据传入模板中。模板不需要传入数据，可省略 data 属性。
   （2）示例

   // index.js 数据存放在这里
   const app = getApp()
   Page({
       data:{
           user:[
               {               					
                   username:"悟空",
                   sex:"男",
                   age:123
               },
               {               					
                   username:"八戒",
                   sex:"男",
                   age:12345
               },
               {               					
                   username:"沙僧",
                   sex:"男",
                   age:1234
               }
           ]
       }
   })
   
   <!-- index.wxml -->
   <!-- 导入模板文件 -->
   <import src="../../templates/msgItem.wxml" />
   <view wx:for="{{user}}">
       <template is="msgItem"><template>
   </view>
   

3. include 引入
   （1） 如果一段代码不需要填入动态数据，那么可以直接使用 include 引入到其他地方。导入除模板定义之外的代码。

   在 templates 目录下创建一个 header.wxml 文件

   <!-- header.wxml -->
   <view>
   	这是 header.wxml 内容
   </view>
   

   接着在 index.wxml 中进行引用

   <!--  index.wxml -->
   
   <include src="../../templates/header.wxml" />
   <view>
       这里是 index.wxml 中代码
   </view>