微信小程序前端入门

微信小程序前端入门

• 编辑：HBuilderX（标准版，官网：https://dcloud.io/hbuilderx.html）
• 运行：微信开发者工具
• 框架：uni-app（官网：https://uniapp.dcloud.io/）
• 发布平台：微信公众平台（https://mp.weixin.qq.com/）

项目创建、运行、上传和发布

• 创建：文件->新建->项目，uni-app，默认模板
• 运行：运行->运行到小程序模拟器->微信开发者工具（最常用）（也可以运行到浏览器上）
• 上传：运行时，在微信开发者工具中，右上角上传->确定->上传，上传后为开发版（开发版仅体验成员可使用）（必须配置小程序AppID才能上传至微信公众平台，否则上传按钮无法点击）
• 发布：在微信公众平台，管理->版本管理->将开发版提交审核，审核通过后发布（全量发布）

项目文件结构

创建后的文件目录：

• pages：小程序的所有页面代码
• static：小程序的静态资源，如图片等
• App.vue：全局变量和全局样式的设置
• pages.json：管理页面
• mainfest.json：小程序配置（必须配置基础配置->uni-app应用标识AppID（直接获取）和微信小程序配置->微信小程序AppID（微信公众平台获取，开发->开发管理->开发设置，开发者ID->AppID））(此ID为小程序唯一标识)

微信开发者工具

• 首次运行时，需在设置->安全中，将服务端口打开

• 

• 调试器

  • 
  • wxml：页面布局
  • styles：页面元素的css样式（可进行修改方便调整UI，但实际代码不会变动，代码要在HbuilderX里改
  • console：控制台，输出程序运行情况
  • AppDate：当前页面的数据，对应HBuilder中页面的data
    

• 

  • 编译：点击可进行重新编译
  • 预览：点击生成预览二维码，可在手机进行预览
  • 真机调试：点击生成二维码，可在手机进行调试，同时电脑微信开发者工具控制台会实时显示调试信息（有些模拟器没有的bug可以通过真机调试找出；有些组件在iOS和安卓上运行效果不同，也能借此找出）

页面创建与删除

创建

pages文件夹目录下右键->新建页面，默认模板，创建（勾选’在pages.json‘中注册），创建完成时pages.json中会自动注册该页面，如果删除页面需手动在pages.json中删去相关代码

style是该页的样式；globalStyle是全局样式。style会覆盖掉globalStyle

navigationBarTitleText是页面标题；enablePullDownRefresh，下滑刷新

页面代码

template，页面元素，vue编写；script，逻辑代码、函数、数据，js编写；style，css样式

页面跳转(三种基本的)

• uni.navigateTo() //跳转至非tabBar页面（即含导航栏页面）
  
• uni.navigateBack() //返回某个页面的接口，不用带参数，默认返回上一层页面
  
• uni.switchTab() //跳转至tabBar页面
  
  • 注意，switchTab会卸载掉除了tabbar页面以外的全部页面，所以跳转到tabbar页面后无法通过uni.navigateBack返回原来的页面

tabBar

一般不超过5个

数据绑定

• v-model（在 <input> (<input> 标签有多种类型，如 button、select 等等)及 <textarea> 元素上进行双向数据绑定）

• v-bind:（单向绑定，v-bind:a=‘b’，使a的值等于b，可简写为:a=‘b’）

  

  

  

  • <input class="border" v-model="password" :placeholder="bind"/>
    • 输入框为空时，显示占位符
    • 输入框非空时，显示password的值
    • placeholder=“bind”，注意，这样的话占位符为字符’bind’而非变量bind

• 变量的显示

  • 两层花括号，如

  • 

  • {{ }}还可以支持运算符判断
    

    

• v-model是input、textare、select组件需要双向绑定用户输入数据的时候使用的。v-bind是在为组件设置属性的时候使用的。{{变量名}}则是用于直接在页面上显示数据

数据缓存

• 每个页面的data都是独立的，跨页无法访问原来的数据

• uni-app提供数据缓存的接口，把数据存储到本地

• uni.setStorageSync(KEY,DATA)

  • 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口
  • 

• uni.getStorageSync(KEY)

  • 从本地缓存中同步获取指定 key 对应的内容
  • 

  更多见https://uniapp.dcloud.io/api/storage/storage?id=setstoragesync

页面生命周期

• onLoad 页面加载时调用，可以获取参数(通过options)，只调用一次。

  • onload要看这个页面有没有被卸载，比如说返回上一级的话那就被卸载了，再进来就会再触发一次

• onShow 页面显示时调用(启动/页面从隐藏到启动)，可调用多次。

跨页面传参

• 本地缓存
  • uni.setStoragaeSync，uni.getStorageSync
• 路由传参
  • 不能传递对象，只能是基础类型
  • uni.swtichTab无法进行路由传参

uni.navigateTo({
	url: '../index/index?username='+this.username+'&password='+this.password
})

v-if, v-else, v-for

• v-if根据判断条件来显示或隐藏该组件
  
• v-for
  

网络请求

uni.request({
    url: 'https://www.example.com/request', //接口地址
    data: {                      //传递的参数
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {//成功请求后调用的函数
        console.log(res.data);
        this.text = 'request success';
    },
	fail: (res) => {//请求失败后调用的函数
		
	}
});

• 官方文档：https://uniapp.dcloud.io/api/request/request

接口的使用

如接口getInformation

getInformation(参数1,参数2,...).then(res=>{//res为接口返回的对象
	console.log(res)//控制台输出接口返回的信息，可注释掉
	/*
	 *函数内容
	 */
})

组件使用

自定义

1. 在根目录下创建一个components文件夹（右键根目录->新建->目录）
   

2. 创建组件名目录和同名.vue文件（注意不要勾选在pages.json中注册，否则需要删除pages.json中相应代码）
   

3. 大致写法跟普通页面一样

4. 父组件与子组件间的参数传递

   • 子组件接受父组件传来的参数
     
   • 子组件传递给父组件参数
     

5. 父组件引用子组件

   

   组件的引用直接使用组件名作为标签名即可。

   :username="username"，将引号中变量的值传给冒号后边的变量（即子组件的变量）

   @returnValue='returnFunc'，子组件的值通过变量returnValue传给函数returnFunc。

   如果returnFunc自带参数，如@returnValue='returnFunc('参数')'，则子组件传回的值将被忽略，函数接收括号里的参数值

插件市场

网址：https://ext.dcloud.net.cn/

内含丰富的组件，可直接引用到自己的项目中进行使用

如：

建议用uni_modules版本，因为HbuilderX可以对uni_modules下的组件进行统一的管理更新，方便使用。

点击使用HBuilderX导入插件即可，插件的调用同自定义组件的使用。

组件使用细节可查看作者给出的说明文档。

小程序注册相关

• 注册平台：微信公众平台
• 一个邮箱绑定一个小程序
• 小程序分为个人主体小程序和企业主体小程序，个人主体的小程序部分功能会受到限制，比如视频播放功能，企业主体小程序需要进行企业认证
• 创建好小程序后，需要给小程序设置基本信息（程序名称、简称、头像、介绍等），才能发布小程序
• 微信开发者工具上传的版本是开发者版本，只有成员管理中的体验成员才能使用
• 开发版需要提交审核，审核通过后才能正式发布
• 审核没通过会告知原因
• 个人迁移到企业主体可直接重新绑定AppID（注册个新账号）然后上传代码就行

常见问题

• 运行出问题时，可尝试 运行->运行到小程序模拟器->停止微信开发者工具，再重新打开

• 小程序访问接口，只能访问https协议，不能访问http协议，开发者工具不检查是否是https，但发布后仅可使用https

• 小程序访问的域名必须添加到微信公众平台的服务器域名中（开发->开发管理->开发设置中），否则无法访问

• template下面只能包含一个根节点，下列写法会报错

  <template>
  	<view>
      </view>
  	<view>
      </view>
  </template>
  

  修改方法：将它们放到同一个中即可

  <template>
  	<view>
          <view>
          </view>
          <view>
          </view>
      </view>
  </template>
  

• 微信小程序层级过高问题

  • canvas等组件在微信小程序是原生组件，默认层级过高，即无法被其他组件覆盖（原生组件会显示在最顶层）
  • 解决方法
    • 使用插件市场的话可参考作者给出的方法
    • 使用<cover-view><cover-image>等

• 动态切换class

  • 可以传给 v-bind:class 一个对象，以动态地切换 class：

    <view v-bind:class="{ active: isActive }"></view>
    

    上面的语法表示 active 这个 class 存在与否将取决于 isActive 的布尔值。

    可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板：

    <view
      class="static"
      v-bind:class="{ active: isActive, 'text-danger': hasError }"
    ></div>
    

项目代码

项目相关代码已放至gitee仓库：https://gitee.com/Hometown2020/wechat-applet-entry-project/tree/master