微信小程序开发

最新推荐文章于 2024-07-19 23:10:09 发布

胡老大的唯一大老婆

最新推荐文章于 2024-07-19 23:10:09 发布

阅读量535

点赞数 2

分类专栏：微信小程序开发文章标签：微信小程序搭建\微信小程序基本框架

本文链接：https://blog.csdn.net/wangjjz/article/details/103061347

版权

微信小程序开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍微信小程序的开发流程，从注册账号到项目搭建，解析小程序与传统应用的区别，以及小程序的功能与应用场景。涵盖开发框架、界面组件、数据绑定、样式设置、事件处理等核心技术，并提供实战案例与开发技巧。

摘要由CSDN通过智能技术生成

微信小程序开发介绍和准备

小程序的诞生

微信浏览网页有时候会卡,甚至白屏,其实就是为了让用户体验更好,也更好管理.他有自己的一套开发框架.

什么是小程序

小程序是一种不需要下载就可以使用的应用,用户扫一扫,搜一搜就可以使用,应用无需安装卸载,却在手机上无处不在.又可以用完就走.并且体验也很好.

小程序和移动应用程序区别

小程序:无需安装,不占内存,易传播.

小程序能做什么

小程序可以实现一个应用程序的能力.已经有自己的生态,各行各业都已渗透进去

搭建一个微信小程序

小程序开发搭建准备:

1.注册小程序账号,微信开发者工具进行开注册小程序账号链接
2.激活所绑定的邮箱
3.信息登记
4.登录小程序管理后台
5.完善小程序信息
6.绑定开发者
7.下载微信开发者工具.微信开发者工具官网下载链接

微信小程序开发框架

创建项目

下载微信开发者工具之后,用微信扫描登录,创建项目
在这里插入图片描述

项目目录结构介绍:

在这里插入图片描述
app.js:主要是注册微信小程序应用
app.json:微信小程序全局配置,网络超时时间设置,各个页面注册路径
app.wxss:设置微信小程序全局样式
project.config.json:保存微信开发者工具的配置信息,比如程序员根据各自喜好配置的一些,界面颜色,编译配置等等
pages:存放微信小程序所有的页面,小程序页面一般由四个文件组成,分别是.js文件,.json文件,.wxss文件,.wxml文件

js:文件负责页面的一些逻辑和数据交互
json:微信小程序页面的一些配置
wxss:页面元素的样式
wxml:页面展示的元素和内容

utils:存放一些工具类函数,达到代码复用的目的

小程序两个配置文件的区别

在这里插入图片描述
pages:注册微信小程序所有页面
tabBar:如果页面是多tab,可以配置tab栏的表现
networktimeout:设置超时时间
debug:开启debug模式,可以在控制台打印一些调试信息或者日志
navigationStyle:
enablePullDownRefresh:设置全局或单页面的下拉刷新
disableScroll:设置是否开启滚动
两个文件的配置如果重复,则页面配置会覆盖掉全局配置.

微信小程序版本

总共有5个版本,分别是预览版本->开发版本->体验版本->审核版本->线上版本
sensor:可以修改地理位置
appdata:数据展示

微信小程序界面的组成成分

小程序一个页面由//index.js(放周期函数等逻辑处理的代码和数据交互代码),index.json(配置),index.wxml(界面元素),index.wxss(界面样式)
然后在app.json里面配置一下路由.配置如下:

{
  "pages": [
    "pages/index/index"
  ]
}

在这里插入图片描述
wxs是对wxml增强的一种脚本语言

wxml(WeiXin Markup Language)之语法:

wxml是框架设计的一套标签语言,结合组件wxs和事件系统,可以构建出页面的结构.
语法:<标签名属性1=“属性1” 属性2=“属性2”></标签名>
严格闭合,大小写敏感

数据绑定,
mustache的方法绑定的,{{message}},和vue差不多.
date-name={{theName}}
hidden="{{hidden}}"
如下图:`

小程序标签组件共同属性:
列表渲染
页面渲染的时候用block,这个不算是一个标签,在渲染的时候不会被渲染出来,当然也就不会有样式class.
<block wx:for="{{items}}" wx:for-item="item" wx:key="{{index}}"> <view>{{item.name}}</view> </block>
条件渲染
wx:if
wx:elif
wx:else
模板引用
templet的name来声明
is属性来引用,data是模板数据

模板引用的两种方式:

1.import
//index.wxml 只会引用a里面的模板内容

<import src="a.wxml"/>
<template is="a"></template>

//a.wxml

<template name="a">
<view>shhsh</view>
</template>

当引用关系是index.wxml引用a.wxml,a.wxml引用b.wxml,则:index.wxml在引用a的时候b不会被引用.
2.include 引用a里面除模板外的所有内容

<include src="a.wxml"/>
<template is="a"></template>

在这里插入图片描述

//wxml
<template name="firstTemplet">
  <view>姓名:{{name}}</view>
  <view>性别:{{sex}}</view>
</template>
<template is="firstTemplet" data="{{...templetName}}"></template>
//js
templetName:{name:"shawn",sex:"man"},

在这里插入图片描述