微信小程序笔记与template开发中的坑

简单介绍:

小程序是在2017年9月1日正式上线,不需要下载,"用完即走"

小程序开发指南

微信官方文档

微信开发者工具(建议下载稳定版)

一:申请AppId

官网写的很明白

开发---开发管理---开发设置---AppID

打开微信开发者工具 填写项目名称--AppID--选择想要的模板(建议使用基础模版)

二:初始化项目

初始化好一个项目之后 目录如下

• pages 小程序里目前所有页面

1. pages下一个文件夹就是一个页面
2. .js文件 用于定义当前页面的js代码
3. .json文件 用于定义当前页面的配置
4. .wxml文件 用于定义页面结构的标签
5. .wxss文件 用于定义当前页面样式

• utils 工具目录
• .eslintrc  eslint配置文件(规范代码风格)
• app.js 小程序入口js文件,只加载一次
• app.json 小程序全局配置文件
• app.wxss 小程序全局样式文件
• project.config.json 项目配置文件,定义项目相关配置
• project.private.config.json 
• sitemap.json 用户搜索小程序的关键字

三:标签介绍

标签	相当于
view	div
text	span
block	template
input	input (双向绑定 model:value="{{name}}")

四:语法(wxml)

<!-- 使用data里面的数据,注意当值是undefined时不会输出到页面 -->
<text>{{name}}</text>
<!-- 双向数据绑定 -->
<input type="text" model:value="{{id}}"  />

<!-- 三目运算 -->
<text>{{num == 10 ? "是10" :"不是10"}}</text>

<!-- wx:if wx:elif wx:else  与vue v-if类似 hidden 与 v-show类似-->
<view wx:if="{{num==1}}">是1</view>
<view wx:elif="{{num==2}}">是2</view>
<view wx:else>是10</view>
<view hidden="{{num==9}}">我是show</view>

<!-- wx:for(item每一项,index下标)  wx:key 与vue v-for类似 -->
<!-- 注意:有个小坑 text标签不会换行,如果写代码时 按下回车换行 页面显示也跟着换行 -->
<view>
  <text wx:for="{{student}}" wx:key="index">{{index}},{{item}} </text>
  <!-- 将item,index换个名字 -->
  <text wx:for="{{student}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">{{idx}},{{itemName}}</text>
</view>

<!-- 模板使用  -->
<!-- 子文件内容 注意name属性
<template name="test">
  <view>
    <text> {{index}}: {{msg}} </text>
  </view>
</template>
 -->
<import src="../../template/test" /> <!-- 引用(可以动态数据) -->
<template is="test" data="{{index:0,msg:'消息'}}"></template>
<!-- 引用(使用静态模版) -->
<include src="../../template/header" />
<include src="../../template/footer" />

4.1 坑:两天时间才解决的坑

问题: 开发使用template时,我将template放在了pages文件夹外面,工具预览也没问题,直到有一天用手机测试,发现手机上看不到对应模版的效果,并且项目开启了按需引入.并且我使用的方式和网上,官网写的差不多!!!!

解决思路: 去文档说分包是异步,官方说需要占位

                 于是在对应的json文件引入,并且占位,

                 手机预览与工具都可以正常显示,但是都有报错,意思是你引入的文件找不到,不是个组件

                 但是template与components是有区别的,不需要去配置json,更何况如果配置他和组件复用就没有区别了,违背了初衷!

                  现在就是 不配置预览出不来,配置了都报错!!!,有报错就知道方式不对!

                  我在预览时看到编译提示(工具功能),发现不配置json文件时,提示我编写的template文件并没有依赖(也就是说根本就没引入进去,所以手机预览看不到效果)

                   查看资料,网上求助发现用这个的也少,直到我看到了一句话

                       使用分包时需要注意代码和资源文件目录的划分

所以我将template文件夹 放到了所需要使用的分包跟目录下

都没有报错!!!         

         

关于点击事件的使用:文章,也可以在 父 js里直接调用 子 方法 

五:外观--wxss

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

wxss官网地址

六:事件

文档位置

<!-- 事件名字onclick 默认有个参数event data-name="{{前端}}"代表 -->
<!--事件传递的参数是 name,值是前端   通过e.target.dataset.name 获取-->

<!-- catchtap 代表阻止向上冒泡事件 -->

<view bindtap="onclick" data-name="前端">
  <view data-id="id">点我</view>
</view>


//对应的js文件
Page({
  data: {
    id: '',
  },
  onclick(e) {
    // e.currentTarget 当前组件的一些属性值集合
    // e.target 代表触发事件的组件 属性值集合
    //e.detail.value 获取输入框的值 对input绑定事件查看
    console.log(e.currentTarget, e.target)
    // 修改data里面的数据id  this.data.id 是本地数据
    this.setData({
      id: e.target.dataset.id
    })
  }
})

七:App 构造器

app.js文件

App构造器与生命周期

//这是共享数据
  globalData: {
    userName: "前端",
  }

// 使用共享数据
const app=getApp()
console.log(app.globalData.userName);

page构造器与生命周期

与此同时，我们要特别留意一点，所有页面的脚本逻辑都跑在同一个JsCore线程，页面使用setTimeout或者setInterval的定时器，然后跳转到其他页面时，这些定时器并没有被清除，需要开发者自己在页面离开的时候进行清理。

八:页面配置

了解相关配置 app.json文件,与页面配置

九:路由跳转

跳转api

十:网络请求

网络通信

十一:本地存储

本地存储