微信小程序 入门到入门

微信小程序 入门到入门

创建微信小程序

具体创建方式，傻瓜式进行。

ShowTime

1.实用npm安装第三方包

1.初始化npm：在所建项目的根目录下，使用 npm init 初始化一下.

npm init

开启“使用npm模块”(右上角详情-本地设置-勾选使用npm模块)

01.png

2.根目录下新建 node_modules 文件夹: mkdir node_modules

mkdir node_modules

3.cd node_modules 进入新建的 node_modules，执行下面命令：

npm install miniprogram-datepicker --production

4.开启微信小程序npm构建

02.png 03.png

5.构建完成后，可安装第三方Ui组件：Vant-weapp

npm i @vant/weapp -S --production

Vant-weapp官方文档地址：

https://vant-contrib.gitee.io/vant-weapp/#/intro

安装后查看node_modules文件，⚠️注意加载时路径：

  "usingComponents": {
    "van-notice-bar": "@vant/weapp/notice-bar/index",
    "van-search": "@vant/weapp/search/index",
    "van-divider": "@vant/weapp/divider/index",
    "van-icon": "@vant/weapp/icon/index",
    "van-count-down": "@vant/weapp/count-down/index",
    "van-button": "@vant/weapp/button/index"
  },

当前完成项目的基本框架配置。

2.配置初始化 app.json

{
  "pages": [
    "pages/index/index",
    "pages/test1/test1",
    "pages/logs/logs"
   
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#6e6d6b",
    "selectedColor": "#e64340",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/test1/test1",
      "text": "测试"
    }]
  },
  "navigateToMiniProgramAppIdList": [
    "wx56c8f077de74b07c"
  ],
  "usingComponents": {
    "van-notice-bar": "@vant/weapp/notice-bar/index",
    "van-search": "@vant/weapp/search/index",
    "van-divider": "@vant/weapp/divider/index",
    "van-icon": "@vant/weapp/icon/index",
    "van-count-down": "@vant/weapp/count-down/index",
    "van-button": "@vant/weapp/button/index"
  },
  "sitemapLocation": "sitemap.json"
}

3.点击编译即可运行（完结）

3.使用微信小程序官方Git版本管理

1.点击版本管理，进行本地初始化构建；

04.png image-20200624145204069.png

2.增加Git管理账号，建立网络认证

image-20200624150758287.png

3.添加仓库地址

image-20200624150916790.png

4.在首次进行推送代码时需添加分支名称，建议使用master进行提交

image-20200624151308601.png

5.具体操作流程，与Git的基本操作相同，第一次的初始化是建立本地的Git仓库代码，之后提交具体流程，上传至本地分支后在上传远程仓库。