开发者文档 | 开发者文档

起步

开发者工具

代码开发工具

推荐JetBrains系列工具进行小程序代码开发

WebStorm macOS Windows 前端开发者首选

Visual Studio Code macOS Windows

IntelliJ IDEA macOS Windows 全栈工程师首选

预览、开发工具

微信开发者工具 macOS Windows

开发工具插件

[JetBrains]插件
微信小程序支持 Wechat mini program support
使用Watcher进行Less开发并编译成wxss Less Watcher
注意: node版本 >= 15.13.0, npm版本 >= 7.7.6, lessc 配置: "math": "parens-division"

微信小程序配置项

勾选 ✅ ES6 转 ES5
调试基础库不应太低，与最新的版本号第2位差值在4-6左右。
例如: 最新的基础库版本号为 2.16.0，项目使用的版本号不低于 2.10.0
开发环境可以勾选 ✅ 「不校验合法域名」，但在生产发布时，一定要去除该项勾选，提前处理域名配置问题。

JavaScript 转 TypeScript 开发

参考

其他内容

请参考微信官方文档·小程序

目录结构

分包说明

微信小程序官方规定单个分包/主包最大 2M, 整个小程序所有分包大小 20M

项目包结构

【cix】公共代码包 必须 单独 git clone

【components】项目公共组件

【configs】项目配置文件(小程序配置信息，测试、生产环境信息) 必须

【custom-tab-bar】自定义tabBar组件 必须

【lib】项目依赖包

【pages】业务项目主包 必须

【pageX】业务项目子包

【static】业务项目静态文件 必须

【utils】业务项目工具类 必须

【app.js】小程序主入口文件 必须

【app.json】小程序全局配置 必须

【app.wxss】小程序全局样式 必须

【config.js】整合后的项目配置（小程序配置、环境配置） 必须

【theme.json】小程序主题配置 必须

全局代理

SD-Proxy

用于代理、重构整个小程序的 Page、Component对象，以便全局注入公共属性值(对象的data属性值中)，简化开发。

文件位置: /cix/utils/proxy/sd/sd-mp

公共属性

isReview 是否审核模式 由remote.json控制
theme 主题模式
feature 功能模块 由remote.json控制
becomeX 是否进行身份转换
crX 主色调的反色, dark模式为 #FFFFFF, light模式为 #000000
crFontMain 文字:主要
crFontSecond 文字:二级
crFontGrey 文字:灰色
crFontLightGrey 文字:浅灰
crMain 主色调
crHighLight 高亮色
crArrowRight 右箭头颜色
cdnBase cdn基本路径 https://storage.txyun.investoday.net/storage
cdnImg cdn图片基本路径 https://storage.txyun.investoday.net/storage/cdn/images
cdnVideo cdn视频基本路径
cdnMatVideo cdn视频素材基本路径 https://storage.txyun.investoday.net/storage/bis/material/video
ciMatVideo ci视频素材基本路径 https://ci.investoday.net/storage/bis/material/video
cdnMatImage cdn图片素材基本路径 https://storage.txyun.investoday.net/storage/bis/material/image
ciMatImage ci图片素材基本路径 https://ci.investoday.net/storage/bis/material/image
layStatusHeight 状态栏高度
layNavHeight navbar高度
layNavHeightX 状态栏 + navbar总高度
layScreenWidth 屏幕宽度
layScreenHeight 屏幕高度
layMenuButtonWidth 菜单胶囊宽度
layMenuButtonLeft 菜单胶囊左距离
laySafe 安全区域
- bottomX 底部安全距离
layTabHeightIX tabBar高度 仅tab页有效

数据监听

watch 数据监听 (仅适用于Page)

在page中使用watch进行数据监听，使用方式如Vue

appWatch 全局数据监听 (仅适用于Page)

在page页面中增加appWatch属性，进行全部数据 getApp().globalData 的监听,globalData一旦变动，会通知所有注册全局监听的页面函数。

javascript

Page({
  appWatch: {
      selfStockList: function(nvl){
        this.setData({
          stockList: nvl,
          oriStockList: nvl
        })
        if(nvl && nvl.length > 0){
          this.setData({
            canEdit: true
          })
        }
        this.getSelfStockQuote();
      }
    }
})

Page({
  appWatch: {
      selfStockList: function(nvl){
        this.setData({
          stockList: nvl,
          oriStockList: nvl
        })
        if(nvl && nvl.length > 0){
          this.setData({
            canEdit: true
          })
        }
        this.getSelfStockQuote();
      }
    }
})

全局通用配置

神策产品名称配置

文件地址: configs/base-config.js 中的 BaseConfig.const.pathProductConfig 配置

json

pathProductConfig: [
        {
            default: true,
            name: "小AI老师",
            path:[
                "/pages/index/**",
                "/pages/aistock/**",
                "/pages/find/**",
                "/pages/info-flow/**",
                "/pages/pay/**",
                "/pages/search/**",
                "/pages/account/**",
                "/pages/contact/**",
                "/pages/webview/**",
                "/pages/report/**"
            ]
        },{
            name: "研报一哥",
            path:[
                "/pageX/pages/ai-report/**"
            ]
        }
    ],

pathProductConfig: [
        {
            default: true,
            name: "小AI老师",
            path:[
                "/pages/index/**",
                "/pages/aistock/**",
                "/pages/find/**",
                "/pages/info-flow/**",
                "/pages/pay/**",
                "/pages/search/**",
                "/pages/account/**",
                "/pages/contact/**",
                "/pages/webview/**",
                "/pages/report/**"
            ]
        },{
            name: "研报一哥",
            path:[
                "/pageX/pages/ai-report/**"
            ]
        }
    ],

default 路径规则未匹配上，默认的产品名称配置
name 产品名称
path 产品名称匹配的小程序路径

路径匹配规则:
路径带有 ** 后半部分属于模糊匹配，只要匹配到前半部分，该页面的神策product_name 都将被设置成此配置 name
路径不带有**属于精确匹配，精确匹配到的页面会设置成此配置 name
精确匹配优先于模糊匹配，需注意相关配置

taro框架H5转小程序

1、合并模板项目

模板项目里面对小程序做了编译及插件配置

模板项目里面对小程序做了编译及插件配置

2、使用css的地方去掉scope 改成 module

css

<style lang="less" module>

</style>

<style lang="less" module>

</style>

3、tailwindcss 禁止使用[],小程序不支持

mt-[24px] 改成 mt-24px
font-[24px] 改成 font-24px

mt-[24px] 改成 mt-24px
font-[24px] 改成 font-24px

4、部分样式写法不支持,需要修改样式

less

:deep() /deep/

//less的Mixins混入写法不支持
#wh(@w,@h){
  width: @w;
  height: @h;
}

:deep() /deep/

//less的Mixins混入写法不支持
#wh(@w,@h){
  width: @w;
  height: @h;
}

5、新的项目css尽量用cssModule,不要使用vue的scoped

6、使用cix feature-mini 分支

因为cssModule的原因，需要使用cix  feature-mini 分支，暂时不能合并到dev

因为cssModule的原因，需要使用cix  feature-mini 分支，暂时不能合并到dev

闪电选股支付对接

闪电选股小程序端Cix配置

1、配置支付信息，后端配置好后给到前端
位置：cix/const/payPlanConstant.js
例如：

"SSDXG-YZYL": {
        productCode: "CSDXG-YZYL",
        name: "研之有理",
        posterUrl: "https://storage.txyun.investoday.net/storage/cdn/images/vip/poster/poster-znxh-1.png",
        posterHeight: "4100rpx",
        notPoster: false,
        forceRiskSurvey: false,
        battery: true,
        isTool: true,
        receivePlanCode: "",
        refundRepurchase: true,
        buyButton: true
    }

"SSDXG-YZYL": {
        productCode: "CSDXG-YZYL",
        name: "研之有理",
        posterUrl: "https://storage.txyun.investoday.net/storage/cdn/images/vip/poster/poster-znxh-1.png",
        posterHeight: "4100rpx",
        notPoster: false,
        forceRiskSurvey: false,
        battery: true,
        isTool: true,
        receivePlanCode: "",
        refundRepurchase: true,
        buyButton: true
    }

2、获取全部产品订阅business的方法里，添加新增支付的productCode
位置 cix/business/BuySubscribeBusiness.js

// 获取全部的产品订阅
    async getAllProductSubscribe(){
        let code = `${PayPlanConstant['SSDXG-VIP'].productCode},${PayPlanConstant['SSDXG-ZFM'].productCode},${PayPlanConstant['SSDXG-SL'].productCode},${PayPlanConstant['SSDXG-ZNXH'].productCode},${PayPlanConstant['SSDXG-ZXSX'].productCode},${PayPlanConstant['SSDXG-YZYL'].productCode}`;
        return await this.getSubscribeAtUnion(code);
    },

// 获取全部的产品订阅
    async getAllProductSubscribe(){
        let code = `${PayPlanConstant['SSDXG-VIP'].productCode},${PayPlanConstant['SSDXG-ZFM'].productCode},${PayPlanConstant['SSDXG-SL'].productCode},${PayPlanConstant['SSDXG-ZNXH'].productCode},${PayPlanConstant['SSDXG-ZXSX'].productCode},${PayPlanConstant['SSDXG-YZYL'].productCode}`;
        return await this.getSubscribeAtUnion(code);
    },

3、给H5的加密数据里面添加新增产品的购买信息
位置 cix/utils/common.js 方法 getCryptLoginToH5

let data = { 
      ...
        isYZYLVip: allSubscribes["CSDXG-YZYL"]?.subscribeStatus,
      ...
    }

let data = { 
      ...
        isYZYLVip: allSubscribes["CSDXG-YZYL"]?.subscribeStatus,
      ...
    }

H5端配置

可以参考闪电选股--个股诊断
H5通过webview跳转过来以后，会自动携带是否购买的信息，即小程序加密数据里的信息
1、跳转小程序方法，以上述的配置为例，其中goodsCode为 'SSDXG-YZYL'

export const toBuyProduct = (goodsCode) => {
  wx.miniProgram.navigateTo({
    url: '/cix/page-x/pages/sd/vip/buy-product/index?goodsCode=' + goodsCode
  });
}

export const toBuyProduct = (goodsCode) => {
  wx.miniProgram.navigateTo({
    url: '/cix/page-x/pages/sd/vip/buy-product/index?goodsCode=' + goodsCode
  });
}

2、在H5解密的实体类中添加对应的新增支付字段 AppletPostMessage.ts

isYZYLVip

isYZYLVip

3、加密信息解析赋值 LoginAtAppletH5t.ts 中 parseAppletEncrypt()

this.isYZYLVip = encryptData.isYZYLVip

this.isYZYLVip = encryptData.isYZYLVip

起步 ​

开发者工具 ​

代码开发工具 ​

预览、开发工具 ​

开发工具插件 ​

微信小程序配置项 ​

JavaScript 转 TypeScript 开发 ​

其他内容 ​

目录结构 ​

分包说明 ​

项目包结构 ​

全局代理 ​

SD-Proxy ​

公共属性 ​

数据监听 ​

watch 数据监听 (仅适用于Page) ​

appWatch 全局数据监听 (仅适用于Page) ​

全局通用配置 ​

神策产品名称配置 ​

taro框架H5转小程序 ​

闪电选股支付对接 ​

闪电选股小程序端Cix配置 ​

H5端配置 ​

强制代码开发规范 ​

起步