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

一、序

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

注: 小程序是一套特殊的东西,融合了原生和web端。他是一个不完整的浏览器对象,所以很多DOM 、 BOM 的东西无法使用,但是他又通过微信APP实现了多线程。

二、如何创建小程序

很简单,首先下载微信开发者工具,下载稳定版本的就好。 下载 然后,创建小程序,可以参考下述图片:

注意正式的小程序需要审批,拿到正式的APPID,我们测试的或者暂时没有的可点那个测试的appid,小程序模板选择默认就好。按照这样的流程走完,我们就创建完一个小程序了。

三、webstrom支持小程序开发

创建完小程序之后,我们先不着急开发。工欲善其事必先利其器,微信开发者工具有点卡,而且功能少,开发效率很低。所以我们还是改造自己的编译器,这里只介绍2种方法。一是 hbuilderX,他有支持小程序的模块,很小巧的一款编译器; 二是 webstorm,我用的他,在这介绍一下配置的方法,其他的大家自行google吧。

1、支持wxml和wxss的文件类型,有语法高亮。 打开webstorm编译器,依次点击 文件 -- 设置 -- 编辑器 -- 文件类型 , 找到 html文件,添加 *.wxml; 找到Cascading style Sheet ,添加 *.wxss。就OK了

2、支持小程序代码提醒。 下载 这个文件,然后,把他放到一个显眼的地方; 然后, webstorm 点击 文件 -- 导入设置 ,找到这个下载的文件,点击确定即可。

以上就是webstorm支持小程序语法的操作。

四、基础文件目录详解

然后解释一下小程序的目录结构。

project.config.json: 小程序的配置文件,包含项目打包配置、上传代码自动压缩等等,是一些开发、打包之类的配置。

app.json: 当前项目的配置文件。包括项目的页面引入、导航条颜色、导航条标题 等等,是项目具体到代码开发上的配置。介绍几个配置:

pages: 包含的页面。每次新增页面都得在这里引入,否则新页面的json配置等无法生效。 注意pages中页面先写的先渲染,所以数组第一条也就是我们的首页。

window: 配置所有页面导航条字体、颜色、背景色等

app.js: 小程序入口文件。生成小程序实例,App({}), 通常在这获取用户信息、授权信息、定义全局变量等。

app.wxss: 小程序全局 style 文件。对整个项目页面生效。通常规定项目的 字体、基础颜色,定义一些公共样式。

utils: 工具函数目录。通常用来放一些公共的js方法。比如封装的request请求,一些别的处理数据什么的方法。

pages: 小程序的页面目录。所有的小程序页面,都写在这里面。

五、完善项目目录

上边大致解释了一下小程序的基础文件,现在按照常见的规范完善一下项目目录,这里面包含一些个人见解,有需要的参考即可。先看一下结果:

现在解释一下这些目录:

components: 我们封装的小程序可复用组件。

constants: 一些项目中的常亮。

image: 用到的图片。

services: 用到的所有接口目录

大致就新建了这几个,如果有别的需求,根据自己的情况增加。

六、基础语法详解

现在大致解释一下小程序的语法。首先, 创建新页面,默认都创建 *.wxml *.wxss *.js *.json 和我们平时写的代码差不多,都是html js css,多了个json配置文件

*.json:常用的属性有2大块,navigationBarTitleText 相关的设置顶部标题的,usingComponents 引用的组件

*.js:getApp() 获取小程序实例,拿全局变量等; Page({}) 创建页面; data 当前页面的变量;onLoad 生命周期,页面加载完毕。

*.wxml:注意,小程序支持的标签很少,像 span 是支持的,div不支持,一般用view代替块级,span、text 代替行级。

*.wxss:大部分css选择器不支持,支持的好像才5个,想支持less等得自己配置   

// json文件
{
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText":"我的",
 "usingComponents": {
 "menu": "/components/menu/index"
 }
}

// js文件
const app = getApp()
Page({
 data: {},

 onLoad: function () {},

})

七、实现页面跳转

和通常的web开发一样,小程序页面跳转页分2中,wxml中的vavigator标签,以及js的navigator相关的api。路由跳转的方法有好几个,这里不一一赘述了,常用的直接跳转

wx.navigateTo,重定向 wx.redirectTo等等,具体的请看官方文档。这里强调一下路由传参,很简单:
1、少量数据。直接问号传参。然后在目标页面的onLoad方法中通过options参数接收。
2、大量数据。直接塞到全局变量里面。

// wxml跳转页面
<navigator url="/pages/my{{item.path}}" class="navigator">
  <image class="imgIcon" src="{{item.icon}}"></image>
  <view class="navigator-text" data-id="{{item.key}}" bindtap="handleMenuTap">{{item.name}}</view>
 </navigator>

//js跳转页面
wx.navigateTo({
  url: `/pages/my/appointDetail/index?_id=${this.data.marker.id}`
 })

//路由传参如何接收

 onLoad: function (options) {
   console.log(options)
 },

八、wx.request 的封装

在utils中新建request.js,简单封装了一下,一些数据要全局配置的都引进来,然后做了些错误的统一处理,没什么难度,不过要特别注意一下cookie的携带。具体代码如下:

const app = getApp()
export default function request(url, options = {}) {
 return new Promise(function (resolve, reject) {
 wx.request({
  url: `${app.origin}${url}`,
  method: 'GET',
  ...options,
  data: options.data,
  header: {
  'content-type': 'application/json',
  'cookie': wx.getStorageSync("cookie")
  },
  success: function (res) {
  //重新授权登录
  if (res.statusCode === 401){
   wx.redirectTo({url: '/pages/login/index'})
   return
  }else if (res.statusCode !== 200) {
   reject({ error: '服务器忙,请稍后重试', code: 500 });
   return
  } else {
   if (url === '/api/cdz/user/weixin/login') {
   const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
        
   if (cookie) wx.setStorageSync("cookie", cookie);
   }
   resolve(res.data);
  }
  },
  fail: function (res) {
  // fail调用接口失败
  if (url === '/api/cdz/user/weixin/login') {
   const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
   if (cookie) wx.setStorageSync("cookie", cookie);
  }
  reject({ error: '网络错误', code: 0 });
  }
 })
 })
}

然后我们使用的时候直接使用封装好的request方法,这样所有的api就封装成一个个函数。我们在页面中直接import引入调用即可。

import request from "../utils/request";
import { stringify } from "../utils/util"

export function testPost(data) {
 return request(`/api/test/post`, {
 method: 'PUT',
 data,
 })
}

export function testGet(data) {
 return request(`/api/test/get`)
}

九、使用 npm (引入 weui、moment等插件)

因为小程序使用的是不完整的浏览器对象,所以很多js包都是不好使的,比如jquery之类的。所以npm基本是废了,能用的依赖包很少,具体哪些能用得自己发掘了。这里还是要介绍一下小程序如何使用npm,毕竟有些包还是要用的。

1、打开 微信开发者工具 -- 点击 详情 -- 勾选 使用npm模块

2、打开命令行,进入项目的根目录下, npm init 初始化npm

3、npm i 。。。安装你需要的依赖

4、打开 微信开发者工具 -- 点击 工具 -- 点击 构建npm。 此时小程序会将 node_modules 文件编译打包,生成新目录 miniprogram_npm ,

5、在需要用到的页面的js文件中,const moment= require('moment') 引入,直接使用即可

6、最后记得忽略文件。新建 .gitignore 文件,node_modules 、 package_lock.json 等文件不需要上传,最好只保留小程序的npm构建包,用什么依赖也是的那个下载。这个到不是必须的

ps: 特殊注意一下weui的引入,这个ui库是纯css的,没有js文件,所以他没法用npm引入,而是直接下载文件,我直接丢到根目录下,然后在 app.wxss 文件的开头引入

@import 'weui.wxss';,这样使用的

十、封装微信小程序可复用组件

现在篇幅有点太长了,这个另写一篇,有需要的可以去看。

十一、总结

以上就是我开发小程序的一些经验和总结,希望能帮到你。另外,整套程序的骨架(业务代码删掉了)我会上传到github,下载 有需要的可以去下载,记得点个赞,哈哈。

最后,我会另写一篇博客,写一下 如何封装小程序 组件,并附上 我开发小程序遇到的坑,以及对应的解决方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解如何搭建mpvue框架搭配vant组件库的小程序项目

    1. vant 介绍 ### 扫码体验 Vant - 轻量.可靠的移动端 Vue 小程序 组件库.由 有赞 公司开发与维护.提供了一系列美观.优质的移动端组件.vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前,请确保你已经学习过微信官方的小程序简易教程 和自定义组件介绍 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包,详见npm 支持 # npm npm i vant-weapp -S --product

  • 使用mpvue搭建一个初始小程序及项目配置方法

     1. 初始化一个 mpvue 项目 现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm -v 5.6.0 # 2. 由于众所周知的原因,可以考虑切换源为 taobao 源 $ npm set registry https://registry.npm.taobao.org/ # 3. 全局安装 vue-cli # 一般是要 sud

  • 基于mpvue的小程序项目搭建的步骤

    前言 mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. Mpvue官网:http://mpvue.com/ demo地址 :https://github.com/ccwyn/mpvuedemo/tree/mast

  • mpvue将vue项目转换为小程序

    一. mpvue简介 mpvue:是由 美团点评团队出品的小程序开 发的一款基于 vue的框架, 从整个 Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发微信小程序的能力. 使用 mpvue开发小程序,你将在小程序技术体系的基础上获取到这样一些能力: l 彻底的组件化开发能力:提高代码 l 完整的 Vue.js 开发体验 l 方便的 Vuex 数据管理方案:方便构建复杂应用 l 快捷的 webpack 构建机制:自定义构建策略.开发阶段 hotReload l

  • 微信小程序实战之运维小项目

    前言 自从微信推出小程序以来,现在业界炒的非常的火,具说叫微信小程序是因为某公司不让叫应用号,我在朋友圈也看过pony的和张小龙朋友圈关于名字的讨论截图,不知道是真是假,反正名字是定了,叫啥无所谓,还是知道它是干啥的比较重要, 像网上说什么新风口了,原生APP以后没活路了等相关文章喜欢的可以多看看, 我们今天不会在产品层面上去介绍小程序,因为我们是搞运维的,所以我还是在运维层面怎么使用小程序. 今天我们用实际例子来讲解和普及小小程序如何使用,来实现类似IP138的功能,输入IP可以查看IP的详细

  • 我要点爆”微信小程序云开发之项目建立与我的页面功能实现

    开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 新建后,微信端为我们提供了一个参考的模板程序,这里我们自己来创建各个所需的文件与代码,所以删除所有不需要的文件,删除cloudfunctions.miniprogram/images.miniprogram/pages文件下所有文件,同时也删除style文件和删除app.json中原始的页面配置. 此时编译下方控制台会报"VM8100:5 appJSON[&qu

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

    一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好).好了废话不多说,看目录. 注: 小程序是一套特殊的东西,融合了原生和web端.他是一个不完整的浏览器对象,所以很多DOM . BOM 的东西无法使用,但是他又通过微信APP实现了多线程. 二.如何创建小程序 很简单,首先下载微信开发者工具,下载稳定版本的就好. 下载 然后,创建小程序,可以参考下述图

  • 详解微信小程序开发用户授权登陆

    本篇将帮助读者实现基于 微信开发者工具 & C#环境 下的用户在小程序上的授权登陆. 准备: 微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/index.html 开发: 在开发之初,我们需要先明确微信方已经制定好的授权登陆流程,参看 官方API - 登陆接口.

  • 详解微信小程序开发聊天室—实时聊天,支持图片预览

    第一次写小程序,老板就让我用websoket写个聊天对话,群聊这种.第一次写聊天功能,第一次用websoket,第一次用小程序,这是在考验我吗?不过我还是研究了一下,终于实现了. 首先看一下界面,界面很简单,就是首页刚进来获取了用户信息头像,昵称等.点击进入聊天室就可以聊天了,下面我介绍的是前端代码实现,后台需要做的很简单,就是你给他发送什么数据,他就给你返回什么数据,就是在接收前台发送过来的图片的时候需要做个格式转换,因为有时候前端将接收到的json字符串转换json对象的时候,遇到有特殊的标

  • 详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能

    微信小程序在12月21日发布了新版本的开发工具,并在官网公布新增分享.模板消息.客服消息.扫一扫.带参数二维码功能. 有了分享功能,相信会给很多创业者带来了无限的可能性! 下面就来看看这些新功能到底怎么用吧! 1.分享 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一方面微信在尝试流量分发方式,但同时又不愿意开放最大的流量入口. 开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html?t=

  • 详解微信小程序开发之下拉刷新 上拉加载

    微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

  • 详解微信小程序开发之——wx.showToast(OBJECT)的使用

    wx.showToast API是显示消息提示框的作用. 先让我们看一下官方的文档说明: 注意:其中的图标,只支持"success"."loading" 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 接下来演示如何使用,先打开微信web开发者工具,新建快速项目,删除掉首页没用的内容,保留如下部分. 添加两个按钮,同事添加点击事件.再在按钮上添加navigator导航,链接到默

  • 详解微信小程序开发之城市选择器 城市切换

    移动开发中城市选择器必不可少. 空白造了个. gif: 这里只上部分js代码: var city = require('../../utils/city.js'); Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, tHeight: 0, bHeight: 0, startPageY: 0, cityList: [], isShowLetter: false, scrollTop: 0, city: "

  • 详解微信小程序审核不通过的解决方法

    前言 近来,微信小程序一直活跃在开发者的眼球中.很多开发者都投身微信小程序的开发中,而这些开发者,总是需要面对最后一道难题:如何以一种优雅的姿势来通过微信官方的审核.本文基于几天前提交审核的一次总结,写得有不当的地方,请各位大佬指正. 问题描述 先上一下微信小程序平台常见拒绝情形的说明文件.由于我提交的小程序中包含了"分享群"的按钮,所以审核未通过,未通过的原因如下: 3.2.1 小程序的页面内容中,存在诱导类行为,包括但不限于诱导分享.诱导添加.诱导关注公众号.诱导下载等,要求用户分

  • 详解微信小程序胶囊按钮返回|首页自定义导航栏功能

    项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页

  • 详解微信小程序(Taro)手动埋点和自动埋点的实现

    每一个公司要想用户增长,都要收集和分析用户操作数据,因此埋点是必不可少的事情. 而对于前端职业发展来说,传统的手动埋点,无疑是繁琐又无聊的事情,能简化就简化. 一.手动埋点 手动埋点就是在每一处需要的地方,都加一段上报埋点的代码.影响代码的阅读体验,且散落的埋点代码不方便管理. 以页面 pv 为例,我们此前是在每一个页面中上报 pv: // src/manual/home/index.tsx import tracking from "./tracking"; // pageSn 是前

随机推荐