小程序知识总结-分享

1. 小程序介绍

   相对于其他而言,有更好的体验,便于微信规范管理,

   无需安装,用完即走,触手可及

   和移动应用相比,不占内存且容易传播,

   移动应用能做的,小程序基本也可以做到

---------------------------------------------------------

2. 开发前准备

 01.注册账号

   点击https://mp.weixin.qq.com/wxopen/waregister?action=step1

小程序知识总结-分享

  02. 安装开发工具

      链接 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 

---------------------------------------------------------------------------------------------------------------------------

3. 个人对小程序的看法

  相对于前端常用的html,css,js来说,小程序是 微信 对前端三剑客的 又一次封装;

  html  变成  wxml ;

  css  --->   wxss;

  js  --->    还是js,但是稍微有些不同

------------------------------------------------------------------------------------------------------------------------------

4. 微信原生小程序开发 代码结构

小程序知识总结-分享

config ----> 存放一些基本的 配置信息(个人喜好) ,比如请求地址 等等;

pages ----> 项目中所有的界面

utils   ---->  工具函数,一般是由开发者自己实现,用于代码复用

app.js --->   相当于入口文件,注册整个应用

app.json ----> 全局配置

app.wxss  ----> 全局样式

---------------------------------------------------------------------------------------

5. 常用配置介绍

 

小程序知识总结-分享
 1 {
 2     "pages": [ //页面路由
 3         "pages/books/books",
 4         "pages/my/my",
 5         "pages/myBooks/myBooks",
 6         "pages/detail/detail",
 7         "pages/comment/comment"
 8     ],
 9     "window": { // 外观
10         "backgroundTextStyle": "light",
11         "navigationBarBackgroundColor": "#f2f2f2",
12         "navigationBarTitleText": "WeChat",
13         "navigationBarTextStyle": "black",
14         "enablePullDownRefresh": false
15     },
16     "tabBar": { // 底部导航栏
17         "list": [{
18             "pagePath": "pages/books/books",
19             "text": "书架",
20             "iconPath": "images/book.png",
21             "selectedIconPath": "images/bookSelected.png"
22         }, {
23             "pagePath": "pages/my/my",
24             "text": "我的",
25             "iconPath": "images/my.png",
26             "selectedIconPath": "images/mySelected.png"
27         }],
28         "color": "#bfbfbf",
29         "selectedColor": "#1AAD19"
30     },
31     "networkTimeout": { // 网络超时
32         "request": 3000
33     }
34 }
View Code

6. 原生开发框架也是框架,和vue 一样的套路

   ***没有dom操作,只用关心数据的变化***

 数据绑定---> 插值语法 {{}}

   

小程序知识总结-分享
1 <view class="book-info">
2                              <text class="book-name">{{item.book_name}}</text>
3                              <text class="author">{{item.author}}</text>
4                              <text class="publisher">{{item.book_publisher}}</text>
5                          </view>
View Code

 

小程序知识总结-分享

上一篇:关于微信网页缓存的问题


下一篇:小程序 video 层级,原生组件