从零开始 | 原生微信小程序开发（一）

! 一步一步从最基础的开始搭建项目

** 粗略地认识底层原理

** 学会全局配置以及页面局部配置

** 要学会独自查阅文档

下载步骤

微信小程序

里面有开发文档，用来指引学习
完成账号注册，选择对应类型（个人）

点击此处，可以查看AppID

下载微信开发者工具

最好下载稳定版

开发

可在微信小程序中开发也可以在vsCode中开发

（目前跟着学习的是在微信小程序中）

目录结构

pages

入口文件夹
index
logs：暂时不需要用到（可删除）
在这里新建文件夹后，再右键新建Page 会生成四个必要的文件，同时在app.json中会自动注册组件

utils

里面有一些工具

app.json

" pages "：所有页面都必须在pages中进行注册，在这里添加注册保存，pages中也会生成对应文件；里面的第一个路径即是首先显示的页面
不支持注释
" window "：在这里配置页面文字或者背景的颜色

app.wxss

配置整体的样式

配置文件

开始

阅读官方文档

学会查阅文档，前面四个部分较为重要

MVVM架构

（对比：vue的架构）
好处：

MVVM架构将我们从命令式编程转移到声明式编程

双线程模型

小程序基于WebView环境下，若在同一线程，执行过多的js逻辑可能阻塞渲染，导致界面卡顿
采用双线程模型的架构：

一些简单的数据绑定（在app.js文件中写）

可以看到循环绑定的方式与vue中不一样，在小程序中一旦要引用变量，必须要{{}}，默认的有 item 和index

对全局的简单配置（在app.json文件中配置）

所有属性均可在文档中查找

// 这里配置的是小程序顶部
"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#006eb0","navigationBarTitleText": "摔倒检测","navigationBarTextStyle": "white"}

// 这里配置的是小程序底部
"tabBar": {"selectedColor": "#006eb0","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "assets/tarbar/home.png","selectedIconPath": "assets/tarbar/home.png"},{"pagePath": "pages/favor/favor","text": "历史检测","iconPath": "assets/tarbar/history.png","selectedIconPath": "assets/tarbar/history.png"}]}

效果图：
像在官方文档中，很清晰的列出来属性对应的样式

单独配置（在对应文件夹中的json文件中）

在文档中可查到配置的属性有多种，可以在json配置滚动到底部的距离（加载新数据），在js中调用函数写事件，具体案例回头查看。
控制台中AppData可以用来查看页面数据

从零开始 | 原生微信小程序开发（一）相关推荐

从零开始 | 原生微信小程序开发（二）
!打好最基础的部分,为后期的项目做好准备 ** 学习注册App函数和Page函数 ** 认识一些常见组件,其余组件使用时查找文档 ** 对于wxss和css,两种区分好 App函数.Page函数 1. ...
《从零开始学微信小程序开发》.pdf
关注"Java后端技术全栈" 回复"000"获取大量电子书 2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关 ...
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...
新手从零开始学习微信小程序开发01
新手从零开始学习小程序开发01 文章目录新手从零开始学习小程序开发01 前言一.什么是微信小程序? 二.如何着手学习微信小程序 1.开发工具下载安装 2.注册账户前言本章主要介绍微信小程序开发 ...
【微信小程序宝典】从零开始做微信小程序开发NO.2
2019独角兽企业重金招聘Python工程师标准>>> 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习: 首先感谢几位给予建议的同学, ...
原生微信小程序开发-黑马优购（一）
接口文档地址: 轮播图--ShowDoc 视频地址: 黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibili 后面也许可以通过快速搭建mock来获取数据(这个工作肯定要会) ...
新手入门宝典：从零开始做微信小程序开发
微信小程序联盟出品.jpg 开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册 ...
从零开始学微信小程序开发：1
1.1.安装 1.2.创建项目登录开发工具: 添加项目:有本地小程序项目和公众号网页开发无AppID的开发者也可以使用开发工具主要文件:如果创建时选中"quick start项目&qu ...
从零开始学微信小程序开发：6 旅行计划调查
小程序对HTML5表单及表单元素进行了封装,提供了丰富的表单组件. 6.1 用form组件收集信息 form(表单)也是前端视图层与后端服务层交互过程中最重要的信息来源. 小程序的form组件具有一些 ...

从零开始 | 原生微信小程序开发（一）

下载步骤

开发

从零开始 | 原生微信小程序开发（一）相关推荐

最新文章

热门文章