这些天看了一下最近特别火的微信小程序,发现和vue大同小异。

新建项目

为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。

项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

配置

我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.json:

{
"pages":[
"pages/home/home",
"pages/read/read",
"pages/publish/publish",
"pages/information/information",
"pages/me/me",
"pages/test/test"
],
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "news",
"navigationBarTextStyle":"white"
},
"tabBar": {
"selectedColor":"#349393",
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath":"assets/home.png",
"selectedIconPath":"assets/home2.png"
},
{
"pagePath": "pages/read/read",
"text": "订阅",
"iconPath":"assets/read.png",
"selectedIconPath":"assets/read2.png"
},
{
"pagePath": "pages/publish/publish",
"text": "发稿",
"iconPath":"assets/publish.png",
"selectedIconPath":"assets/publish2.png"
},
{
"pagePath": "pages/information/information",
"text": "消息",
"iconPath": "assets/information.png",
"selectedIconPath": "assets/information2.png"
},
{
"pagePath": "pages/me/me",
"text": "我",
"iconPath": "assets/me.png",
"selectedIconPath": "assets/me2.png"
}
]
}
}

路由:

注意app.json

微信小程序(1)--新建项目的更多相关文章

  1. 微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布!!!

    微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布 Weixin-App-Shop 是捷微团队开发的微信小程序商城开源项目,涵盖了微信商城的全部功能,能够快速发布简单易用的小 ...

  2. 详解微信小程序开发(项目从零开始)

    一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好). ...

  3. 微信小程序豆瓣电影项目的改造过程经验分享

    在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和 ...

  4. 微信小程序“信用卡还款”项目实践

    小程序概述 11月3日晚,微信团队对外宣布,微信小程序开放公测.开发者可登陆微信公众平台申请,开发完成后可以提交审核,公测期间暂不能发布. 我们前一段时间也进行了小程序开发,现在来对之前的开发体验做一 ...

  5. 微信小程序(2)——新建页面

    在当前版本中,我们可以快速的新建并且新建页面. 在app.json文件中输入 { "pages":[ "pages/index/index" ] } 输入&qu ...

  6. 微信小程序之给项目设置id后提示不在合法域名列别中

    hotapp 有免费的https proxy ,可以免费代理请求任何http或者https服务,只要设置好合法域名为https://wxapi.hotapp.cn, 就可以请求网址如请求小程序联盟的例 ...

  7. 微信小程序跳转微信小程序新增配置项目 navigateToMiniProgramAppIdList

    每个小程序可跳转的其他小程序数量限制为不超过 10 个 从 2.4.0 版本以及指定日期(具体待定)开始,开发者提交新版小程序代码时,如使用了跳转其他小程序功能,则需要在代码配置中声明将要跳转的小程序 ...

  8. 微信小程序上传项目到github

    Step1:点击使用版本控制 点击开发工具右上角的版本控制按钮 Step2:点击初始化本地仓库: 等待初始化结束 Step3:在github新建仓库 Step4: 配置git用户密码或ssh: Ste ...

  9. 微信小程序把玩(一)Hello WeApp

    原文:微信小程序把玩(一)Hello WeApp 本篇默认已经成功安装微信小程序工具 新建项目 AppID查看公众开发平台设置查看(https://mp.weixin.qq.com) 项目名称随意填写 ...

  10. 微信小程序转化为uni-app项目

    前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的功能,但是由于自己前端抠脚的原因没有写出来,然后自己在网上搜索的时候发现了有个微信小程序里面的页面及其的符合我的需求.那么问题 ...

随机推荐

  1. mysql 8.0.13 zip windows 10安装

    1.下载安装包 https://dev.mysql.com/downloads/mysql/ 下载后解压到D:\Program Files\mysql-8.0.13-winx64 2.添加配置文件my ...

  2. [CF-GYM]Abu Tahun Mod problem题解

    前言 这道题比较简单,但我还是想了好一会 题意简述 Abu Tahun很喜欢回文. 一个数组若是回文的,那么它从前往后读和从后往前读都是一样的,比如数组\(\left\{1\right\},\left ...

  3. 图论 List

    题目 #A 小 K 的农场 (Unaccepted)    #B 信息传递 (Unaccepted)    #C 最短路计数 (Accepted)    #D 通往奥格瑞玛的道路 (Accepted) ...

  4. Java多线程引例及实现多线程的方式

    多线程(英语:multithreading),是指从软件或者硬件上实现多个线程并发执行的技术. Java多线程是由JVM来实现,不必关心操作系统的调用问题. 假如我们要实现如下功能: public c ...

  5. jsc2019_qualC Cell Inversion

    先吐槽一下这个比赛的奇怪名字 这个破名字让我实在不知道博客标题该叫啥/px 题目大意 给你一个长度为2n的序列 包括W和B 每次可以选一个区间将里面的颜色反转 但是每个点只能被作为端点选一次 问将序列 ...

  6. Nginx 官网文档翻译汇总

    Nginx 官网文档,各个模块的手册在这里. Nginx 中文文档 - 淘宝翻译 改版后的新 Nginx 官网文档 概述 新手指南 控制 Nginx 管理员指南 Admin Guide 安装 基本功能 ...

  7. log4j配置及异常、解决办法

    配置: ### set log levels ### D只有一个E也只有一个 log4j.rootLogger = debug,stdout,D,E ### 输出到控制台 ### log4j.appe ...

  8. [LeetCode] 342. Power of Four(位操作)

    传送门 Description Given an integer (signed 32 bits), write a function to check whether it is a power o ...

  9. 12.定义Lock类,用于锁定数据.三步走,锁的优缺点

    #在threading模块当中定义了一个Lock类,可以方便的使用锁定: # #1.创建锁 # mutex = threading.Lock() # # #2.锁定 ''' mutex.acquire ...

  10. HTML5--浏览器全屏操作、退出全屏、是否全屏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...