小程序开发入门

曾经终败给现在 2022-04-05 15:13 274阅读 0赞

> **目录 **
> 
> 注：小程序开发如果有vue框架使用背景会感觉入手相对容易 
> 
>  *  申请账号
>  *  安装开发工具
>  *  新建项目
>  *  配置文件解析

已有账号直接登录即可，注册流程如下，账号信息-->邮箱激活--->信息登记；

邮箱激活使用经常使用的邮箱激活，信息登记中公司账号认证需要提供相关营业执照证明，个人账号无法使用支付等api

![20181213090735314.png][]

开发工具下载地址：[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18121111][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html_t_18121111]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70][]

1.  申请账号
2.  安装开发工具
3.  新建项目（选择快速启动）
4.  配置文件解析

> **JSON 配置目录**
> 
> ![20181213093154495.png][] 
> 
> **小程序配置 app.json**
> 
> `app.json` 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 `app.json` 配置内容如下：
> 
>     {
>       "pages": ["pages/index/index", "pages/logs/logs"],
>         //用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录
>       "window": {   
>         "backgroundTextStyle": "light",
>         "navigationBarBackgroundColor": "#fff",
>         "navigationBarTitleText": "WeChat",
>         "navigationBarTextStyle": "black"
>       }
>     }
> 
>  app.json配置项：
> 
> ![1179309-20170621113824898-803962822.png][] 
> 
>  windows配置项：
> 
> ![1179309-20170621130151929-1752738973.png][] 
> 
> tabbar配置项：
> 
>  ![1179309-20170621131741773-1946002353.png][]
> 
> tabbar的list对象配置如下：
> 
> ![1179309-20170621134519913-253724599.png][] 
> 
>  
> 
> networktimeout配置项：
> 
> ![1179309-20170621135143163-465715336.png][] debug配置项：
> 
> 默认false，true开启后，页面（page）的注册、页面路由、数据更新、事件触发等调试信息将以info的形式，输出在“调试”功能的console面板上。
> 
> 配置项细节可以参考传送门：[https://developers.weixin.qq.com/miniprogram/dev/framework/config.html][https_developers.weixin.qq.com_miniprogram_dev_framework_config.html]
> 
> **工具配置 project.config.json**
> 
>  `project.config.json设置`界面颜色、编译配置等等，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
> 
> 配置项细节可以参考传送门：[https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_projectconfig.html]
> 
> **页面配置 page.json**
> 
> `page.json` 其实用来表示 pages/logs 目录下的 `logs.json` 这类和小程序页面相关的配置。
> 
> `app.json` 里边声明全局配置。实际情况中每个页面都有自己的配置，因此提供了 `page.json(log.json、index.json)`，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。
> 
> 配置项细节可以参考传送门：[https://developers.weixin.qq.com/miniprogram/dev/framework/config.html\#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE][https_developers.weixin.qq.com_miniprogram_dev_framework_config.html_E9_A1_B5_E9_9D_A2_E9_85_8D_E7_BD_AE]。
> 
> **WXML 模板**
> 
> 打开 `pages/index/index.wxml`，你会看到以下的内容:
> 
>     <view class="container">
>       <view class="userinfo">
>         <button wx:if="{
>         {!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
>         <block wx:else>
>           <image src="{
>         {userInfo.avatarUrl}}" background-size="cover"></image>
>           <text class="userinfo-nickname">{
>         {userInfo.nickName}}</text>
>         </block>
>       </view>
>       <view class="usermotto"> <text class="user-motto">{
>         {motto}}</text> </view>
>     </view>
> 
> 和 `HTML` 非常相似，`WXML` 由标签、属性等等构成：小程序的 `WXML` 用的标签是 `view`, `button`, `text` 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。
> 
> 详细的组件讲述传送门：[https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/framework.html][https_developers.weixin.qq.com_miniprogram_dev_quickstart_basic_framework.html]
> 
> 1.  多了一些 `wx:if` 这样的属性以及 `{ { }}` 这样的表达式
>     
>      MVVM 的开发模式（例如 React, Vue），把渲染和逻辑分离。简单来说就是不要再让 `JS` 直接操控 `DOM`，`JS` 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
>     
>     小程序的框架也是用到了这个思路，如果你需要把一个 `Hello World` 的字符串显示在界面上。
>     
>     WXML 是这么写 :
>     
>         <text>{
>               {msg}}</text>
>     
>     JS 只需要管理状态即可:
>     
>         this.setData({msg: 'Hello World'})
>     
>     通过 `{ { }}` 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 `if`/`else`, `for`等控制能力，在小程序里边，这些控制能力都用 `wx:` 开头的属性来表达。
>     
>     配置项细节可以参考传送门：[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/index.html][https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_index.html]
> 
> **WXSS 样式**
> 
> `WXSS` 具有 `CSS` 大部分的特性，小程序在 `WXSS` 也做了一些扩充和修改。
> 
> 1.  `WXSS`在底层支持新的尺寸单位 `rpx` ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
> 2.  提供了全局的样式和局部样式。和前边 `app.json`, `page.json` 的概念相同，你可以写一个 `app.wxss` 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 `page.wxss` 仅对当前页面生效。
> 3.  此外 `WXSS` 仅支持部分 `CSS` 选择器
> 
> 配置项细节可以参考传送门：[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html][https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxss.html]。
> 
> **JS 交互逻辑**
> 
> 一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等
> 
>     <view>{
>         { msg }}</view> <button bindtap="clickMe">点击我</button>
> 
> 点击 `button` 按钮的时候，我们希望把界面上 `msg` 显示成 `"Hello World"`，于是我们在 `button` 上声明一个属性: `bindtap` ，在 JS 文件里边声明了 `clickMe` 方法来响应这次点击操作：
> 
>     Page({
>       clickMe() {
>         this.setData({msg: 'Hello World'})
>       }
>     })
> 
> 配置项细节可以参考传送门：[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html][https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_event.html]。

api大全传送门：[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html][https_developers.weixin.qq.com_miniprogram_dev_framework_app-service_api.html]

（未完待续........）

[20181213090735314.png]: /images/20220405/c39b5145ae7f447681e87dad31e37cdc.png
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html_t_18121111]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18121111
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70]: /images/20220405/5e92988f1aeb48eab176adcf2dc83773.png
[20181213093154495.png]: /images/20220405/3a185d056a3145d2875bcc758a7e27ea.png
[1179309-20170621113824898-803962822.png]: /images/20220405/b9b163596fee4ca0a7098c6f393a4775.png
[1179309-20170621130151929-1752738973.png]: /images/20220405/2684ca2571a141f1b7abdd80c89652bc.png
[1179309-20170621131741773-1946002353.png]: /images/20220405/4debe92094cc47279f19493b4a92e219.png
[1179309-20170621134519913-253724599.png]: /images/20220405/f1dae25d913d4a0e95b038a650a2eec8.png
[1179309-20170621135143163-465715336.png]: /images/20220405/fb12f2426dc4497ea9edb1a3681d2a9a.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_config.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
[https_developers.weixin.qq.com_miniprogram_dev_devtools_projectconfig.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_config.html_E9_A1_B5_E9_9D_A2_E9_85_8D_E7_BD_AE]: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE
[https_developers.weixin.qq.com_miniprogram_dev_quickstart_basic_framework.html]: https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/framework.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_index.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/index.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxss.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_event.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_app-service_api.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html