微信小程序前端入门- 校招VIP

文章声明：转载来源：https://blog.csdn.net/qq_45975757/article/details/123017947

编辑：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为小程序唯一标识)

微信开发者工具

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

2.调试器

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样式

页面跳转(三种基本的)

1.uni.navigateTo() //跳转至非tabBar页面（即含导航栏页面）

2.uni.navigateBack() //返回某个页面的接口，不用带参数，默认返回上一层页面

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

1.输入框为空时，显示占位符

2.输入框非空时，显示password的值

3.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)，只调用一次。

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

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

跨页面传参

1.本地缓存

uni.setStoragaeSync，uni.getStorageSync

2.路由传参

不能传递对象，只能是基础类型

uni.swtichTab无法进行路由传参

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

v-if, v-else, v-for

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

2.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) => {//请求失败后调用的函数
		
	}
});

1.官方文档：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.父组件与子组件间的参数传递

(1)子组件接受父组件传来的参数

(2)子组件传递给父组件参数

5.父组件引用子组件

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

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

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

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

插件市场

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

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

如：

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

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

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

小程序注册相关

1.注册平台：微信公众平台

2.一个邮箱绑定一个小程序

3.小程序分为个人主体小程序和企业主体小程序，个人主体的小程序部分功能会受到限制，比如视频播放功能，企业主体小程序需要进行企业认证

4.创建好小程序后，需要给小程序设置基本信息（程序名称、简称、头像、介绍等），才能发布小程序

5.微信开发者工具上传的版本是开发者版本，只有成员管理中的体验成员才能使用

6.开发版需要提交审核，审核通过后才能正式发布

7.审核没通过会告知原因

8.个人迁移到企业主体可直接重新绑定AppID（注册个新账号）然后上传代码就行

常见问题

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

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

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

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

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

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

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

6.微信小程序层级过高问题

(1)canvas等组件在微信小程序是原生组件，默认层级过高，即无法被其他组件覆盖（原生组件会显示在最顶层）

(2)解决方法

使用插件市场的话可参考作者给出的方法

使用<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